使用 D3.js 图表创建仪表板时的疑问

Question

我想创建一个仪表板，将四个不同的基于 D3.js 的图表放在一个布局中。 我找到了这个解决方案：https://github.com/keen/dashboards/blob/gh-pages/README.md 但是，在自述文件中我发现了这一点：

设置：如果您是 Keen IO 的注册用户，请导航到您的热衷 项目，或者如果您一开始没有用户，您可以简单地使用一些 我们为您准备的演示数据。你可以通过去访问那些 到存储库并导航到演示数据。在那里，你会看到 一些 javascript 文件，其中包含一些代码。我们将简单地粘贴 .html 文件中的那些。

我不清楚是否可以将此工具用作开源工具，或者它实际上是否依赖于 Keen IO 中的帐户？

实际上，我需要的只是具有不同 div 容器和一些基于 CSS 的样式的布局模板，这样我就可以将我的 D3.js 图表放入每个 div 容器中。

Answer 1

您的问题更令人怀疑，但这可能与以下问题重复

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/