使用 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();

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

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

检查 fiddle : Fiddle，数据只是样本值，以使其看起来不错。

希望对您有所帮助。

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

Problems rendering chart with Dimple.js

javascript

json

d3.js

dimple.js