Сомнения при создании приборной панели с диаграммами D3.js

Я хочу создать приборную панель, которая объединила бы четыре разных диаграммы на основе D3.js в одном макете. Я нашел это решение: https://github.com/keen/dashboards/blob/gh-pages/README.md Однако в риом я нашел это:Сомнения при создании приборной панели с диаграммами D3.js

установки: Если вы зарегистрированный пользователь Keen IO, ориентироваться на свой острый проект или, если у вас нет пользователя на во-первых, вы можете просто использовать некоторые демо-данные , которые мы подготовили для вас. Вы можете получить доступ к ним, переместив в репозиторий и перейдя на демо-данные. Там вы увидите некоторые файлы javascript с некоторым кодом в них. Мы просто вставим в файл .html.

Мне непонятно, можно ли использовать этот инструмент в качестве источника с открытым исходным кодом или действительно ли он зависит от учетной записи в Keen IO?

Действительно, мне нужен только шаблон макета с различными контейнерами div и некоторый стиль на основе CSS, так что я мог бы разместить диаграммы D3.js в каждом контейнере div.

источник

2017-02-02 Dinosaurius

Вы создаете приборную панель с данными из [keen.io] (https://keen.io/)? Этот проект github в основном выглядит как демонстрация того, как потреблять и визуализировать данные из своих API. Если вы просто пытаетесь создать страницу с несколькими диаграммами 'd3' (вашего собственного создания), то этот вопрос не имеет смысла. – Mark

Ваш вопрос еще более сомнительно, но это может быть дубликатом вопрос ниже

how to show two d3.js diagrams on the same page

Другой вариант заключается в использовании CanvasJS

HTML:

<div id="chartContainer1" style="height: 260px; width: 100%;"></div> 
<div id="chartContainer2" style="height: 260px; width: 100%;"></div>

JavaScript:

var chart1 = new CanvasJS.Chart("chartContainer1", 
    { 

     data: [ 
     { 
     type: "column", 
     dataPoints: [ 
     { x: 10, y: 71 }, 
     { x: 20, y: 55}, 
     { x: 30, y: 50 }, 
     { x: 40, y: 65 }, 
     { x: 50, y: 95 }, 
     { x: 60, y: 68 }, 
     { x: 70, y: 28 }, 
     { x: 80, y: 34 }, 
     { x: 90, y: 14} 
     ] 
     } 
     ] 
    }); 

var chart2 = new CanvasJS.Chart("chartContainer2", 
    { 

     data: [ 
     { 
     type: "column", 
     dataPoints: [ 
     { x: 10, y: 21 }, 
     { x: 20, y: 45}, 
     { x: 30, y: 30 }, 
     { x: 40, y: 65 }, 
     { x: 50, y: 55 }, 
     { x: 60, y: 88 }, 
     { x: 70, y: 38 }, 
     { x: 80, y: 54 }, 
     { x: 90, y: 13} 
     ] 
     } 
     ] 
    }); 

chart1.render(); 
chart2.render();

JsFiddle (CanvasJS): http://jsfiddle.net/nikdtu/x2fj6b9c/ JsFiddle (D3): http://jsfiddle.net/nikdtu/4cyv2y0d/

источник

2017-02-02 11:03:23

Это был не я, который отклонил ваш ответ, но, пожалуйста, скажите, почему мой вопрос сомнительный? Кроме того, мне не нужно использовать Canvas.js. У меня все сделано с помощью D3.js. Теперь просто хочу собрать вещи на одной приборной панели, не изобретая колесо. – Dinosaurius

Для D3 вы можете ссылаться на ссылку другого вопроса Stackoverflow, о котором я упомянул в ответе. JSFiddle: http://jsfiddle.net/nikdtu/4cyv2y0d/ –

Да, для KeenIO Вы должны быть зарегистрированы на их platform создавать свои проекты (в вашем случае - приборные панели) , Ограниченные варианты доступны бесплатно. Вы также можете использовать любого другого поставщика для создания аналитических панелей D3, таких как Sisense.

источник

2018-01-02 21:34:32 Victoria

Сомнения при создании приборной панели с диаграммами D3.js

ответ

Смежные вопросы