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

Question

我正在尝试用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>

Answer 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();

这就是我如何更改数据数组的结构。

我知道这并不是您确切情况的解决方案。 但是我认为值得分享。 :)

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

希望对您有所帮助。