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

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

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

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

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


javascript jquery css d3.js keen-io
person Dinosaurius    schedule 02.02.2017    source источник
comment
Вы создаете информационную панель с данными из keen.io? Этот проект github в первую очередь выглядит как демонстрация того, как использовать и визуализировать данные из их API. Если вы просто пытаетесь создать страницу с несколькими диаграммами d3 (собственно созданными), то этот вопрос не имеет смысла.   -  person Mark    schedule 02.02.2017

Ответы (1)


arrow_upward
3
arrow_downward

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

как показать две диаграммы d3.js на та же страница

Другой вариант — использовать 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/

person Nikhil Maheshwari    schedule 02.02.2017
comment
Не я проголосовал за ваш ответ, но, пожалуйста, скажите мне, почему мой вопрос сомнительный? Кроме того, мне не нужно использовать Canvas.js. У меня все сделано с помощью D3.js. Теперь просто хочу собрать все вместе на одной приборной панели, не изобретая заново велосипед. - person Dinosaurius; 02.02.2017
comment
Для D3 вы можете сослаться на ссылку другого вопроса Stackoverflow, который я упомянул в ответе. JSFiddle: jsfiddle.net/nikdtu/4cyv2y0d - person Nikhil Maheshwari; 02.02.2017