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，数据只是示例值，使其显得更好。

我希望它有所帮助。

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

1 个答案: