В индустрии обслуживания данных 2B трудно дать пользователю понять, как большие данные, машинное обучение и другие новые технологии помогают им.

Когда я обсуждаю с потенциальными пользователями нашего продукта, особенно ценность нашего продукта заключается в визуализации многочисленных ключевых показателей их бизнеса, профилей клиентов, пространственного распределения клиентов с точки зрения зон, например, скорости конвертации различных каналов, очень трудно позволить они понимают повествования без «настоящего продукта». Если они не могут попытаться перенести два разных набора данных: прогноз машинного обучения клиента, который использует динамическую перепись и свои исторические данные клиента на одном экране, потенциальный клиент не может иметь реального понимания, как машинное обучение может помочь им добавить преимущества, приходящие к принятию решений с помощью динамических большое количество данных.

Раньше я создавал прототипы диаграмм с простым взаимодействием или просто статическими изображениями. Во многих ситуациях этого недостаточно для пользователей и заинтересованных сторон.

Поскольку я переключаю прототипирование с Axure на Framerjs, создание диаграмм прототипов можно решить с помощью eCharts. Во Framerjs eCharts можно встроить в проект. Таким образом, диаграммы теперь можно легко моделировать реальный продукт.

ECharts - это бесплатная мощная библиотека для построения диаграмм и визуализации, предлагающая простой способ добавления интуитивно понятных, интерактивных и настраиваемых диаграмм в ваши коммерческие продукты. Он написан на чистом JavaScript и основан на zrender, совершенно новой облегченной библиотеке холста. - Внедрение NPM eCharts

Шаг 1. установите eCharts

Как Framer Doc представил модель npm, используя тот же метод для установки eCharts. Если вы не устанавливали npm, посмотрите здесь:



02 - Установка Node.js и обновление npm | Документация по npm
Место, где документируется все, что связано с npm docs.npmjs.com



После установки npm с помощью npm установите eCharts.

# In your terminal
cd ~/my-project.framer
npm install echarts --save

Создайте новый модуль в /modules и назовите его npm.coffee.

# File: modules/npm.coffee
exports.echarts = require "echarts"

После обновления вы можете импортировать электронные диаграммы в свой проект.

# Import the eCharts module from your npm
{echarts} = require "npm"

Шаг 2. Создайте слой

Вы можете перемещать слой-держатель eChart во Framer.

# Create a layer that holding the chart
chart = new Layer
chart.width = 500
chart.height = 500
chart.html = “<div id=’main’ style=’height: 500px; width: 500px;’></div>”

Если вы хотите, чтобы события eCharts были активными, добавьте следующее:

chart.ignoreEvents = false

Шаг 3. добавление диаграммы

Это документ eCharts ниже. Использование eCharts API для создания всех видов диаграмм:



ecomfe / echarts
echarts - мощная интерактивная библиотека для построения графиков и визуализации для браузера github.com



Круговая диаграмма в качестве примера:

# create a chart with eCharts
mycharts = echarts.init(document.getElementById('main'))
# define the chart paramaters
option = {
    backgroundColor: '#2c343c',
title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },
tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'visiting channel',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'Directly visit'},
                {value:310, name:'Mail'},
                {value:274, name:'CrossAD'},
                {value:235, name:'VideoAD'},
                {value:400, name:'SearchEngin'}
            ].sort((a, b) -> 
             a.value - b.value),
            roseType: 'angle',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
mycharts.setOption(option)

Framerjs + eCharts - это комбинация, которая делает создание прототипов увлекательным и, что еще более важно, имитирует ваше воображение!