我正在尝试用 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>
最佳答案
我注意到您没有得到任何答案，因此我想分享我的想法，如果它对您有帮助的话。
正如我所见，根据您拥有的数据结构绘制多线图并不容易。如果您可以控制数据的结构，那么将其更改为如下所示的某种格式可能会使事情变得容易得多。
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 ，数据只是样本值，以使其看起来不错。
希望对您有所帮助。
关于javascript - 使用 Dimple.js 渲染图表时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48446304/