使用 Dimple.js 渲染图表时出现问题答案

【问题标题】：Problems rendering chart with Dimple.js使用 Dimple.js 渲染图表时出现问题
【发布时间】：2018-01-25 15:22:09
【问题描述】：

我正在尝试使用 Dimple 制作图形。它必须在一个图形中显示日落和日出。完全没看懂……

在下面查看我的代码。

我不明白如何在一个图形中获得多个系列。在我看来，使用 addTimeAxis 方法也是合乎逻辑的，但在许多示例中，我也看到他们使用 addCategoryAxis 方法。

我希望有人可以帮助我一点点，提示一两个！

非常感谢，

马可

    <html>
    <div id="chartContainer">
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>

    <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

    var data = [
      [{ "Date":"01/01/2018", "Sunrise":"08:10", "Sunset":"17:20" },
      {  "Date":"02/01/2018", "Sunrise":"08:08", "Sunset":"17:25" },
      {  "Date":"03/01/2018", "Sunrise":"08:06", "Sunset":"17:30" },
      {  "Date":"04/01/2018", "Sunrise":"08:04", "Sunset":"17:35" },
      {  "Date":"05/01/2018", "Sunrise":"08:02", "Sunset":"17:40" },
      {  "Date":"06/01/2018", "Sunrise":"08:00", "Sunset":"17:45" }]
    ];    

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(70, 40, 490, 320)

    var x = myChart.addTimeAxis("x", "Date", "%d/%m/%Y", "%d:%m");
    var y = myChart.addTimeAxis("y", "Sunrise","%H:%M", "%H:%M");

    var s1 = myChart.addSeries(null, dimple.plot.line, [x,y]);

    s1.lineMarkers = true;
    myChart.addLegend(180, 10, 360, 20, "right");
    myChart.draw();

  </script>
</div>
</html>

【问题讨论】：

标签： javascript json d3.js dimple.js

【解决方案1】：

我注意到你没有得到任何答案，所以我想分享我的想法，如果它对你有帮助的话。

正如我所见，用您拥有的数据结构绘制多折线图并不容易。如果您对数据的结构有任何控制权，那么也许将其更改为如下所示的某种格式会使事情变得容易得多。

var svg = dimple.newSvg("#chartContainer", 590, 400);

var data = [
        { "Date":"01/01/2018", "Mode":"Sunrise", "Time":"08:10" },
        { "Date":"02/01/2018", "Mode":"Sunrise", "Time":"09:01" },
        { "Date":"03/01/2018", "Mode":"Sunrise", "Time":"09:30" },
        { "Date":"04/01/2018", "Mode":"Sunrise", "Time":"08:05" },
        { "Date":"05/01/2018", "Mode":"Sunrise", "Time":"08:10" },
        { "Date":"06/01/2018", "Mode":"Sunrise", "Time":"08:35" },
        { "Date":"01/01/2018", "Mode":"Sunset", "Time":"16:20" },
        { "Date":"02/01/2018", "Mode":"Sunset", "Time":"15:25" },
        { "Date":"03/01/2018", "Mode":"Sunset", "Time":"14:05" },
        { "Date":"04/01/2018", "Mode":"Sunset", "Time":"15:10" },
        { "Date":"05/01/2018", "Mode":"Sunset", "Time":"16:02" },
        { "Date":"06/01/2018", "Mode":"Sunset", "Time":"15:15" },
      ];

var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 40, 490, 320)

var x = myChart.addTimeAxis("x", "Date", "%d/%m/%Y", "%d/%m/%Y");
var y = myChart.addTimeAxis("y", "Time","%H:%M", "%H:%M");

var parseTime = d3.timeParse("%H:%M:%S");
y.overrideMin = parseTime("07:00:00");
y.overrideMax = parseTime("19:00:00");

var s = myChart.addSeries("Mode", dimple.plot.line);
s.interpolation = "cardinal";
s.lineMarkers = true;
myChart.draw();

这里的事情是我如何改变数据数组的结构。

我知道这并不是针对您的具体情况的真正解决方案。但我认为这值得分享。 :)

检查小提琴：Fiddle，数据只是样本值，以使其看起来不错。

希望对你有帮助。

【讨论】：

您好 Nimeshka，非常感谢您的回复！这正是我所需要的……我可以轻松地更改服务器上的数据格式，完全没有问题……事实上……我之前一直在操纵它……找到渲染图形的正确方法。 ..它只是需要另一种思维方式...我想我现在明白了！再次感谢您，非常高兴！保重，一切顺利！你有一个美丽的国家！马可（marco.craamer@gmail.com）