1

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

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

我不清楚是否可以将此工具用作开源工具，还是实际上取决于 Keen IO 中的帐户？

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

4

1 回答 1

3

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

如何在同一页面上显示两个 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/

于 2017-02-02T11:03:23.217 回答