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/

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

1 个答案:

使用D3.js图表​​创建仪表板时出现疑问

1 个答案:

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