使用Dimple.js绘制日出日落图表遇阻，求技术指导

阿华AIGC实验室

2026-5-15

解决Dimple.js单图表展示日出日落双系列的问题

嘿，我来帮你搞定这个图表的问题！你遇到的核心点是数据格式转换和多系列的正确配置，还有时间轴的用法，我一步步给你拆解：

首先，修正你的数据结构

你现在的data外面多套了一层数组，而且是「宽格式」（每个日期包含两个时间字段），Dimple处理多系列时更适合用「长格式」——也就是把日出、日落拆成单独的数据行，用一个字段来区分系列类型。修改后的数据应该是这样：

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

然后，正确配置图表的轴和多系列

你之前用addTimeAxis的思路是完全正确的！因为时间是连续的数值，addCategoryAxis适合离散的分类（比如不同的城市名称），所以时间轴就该用addTimeAxis。接下来是完整的代码修改：

<html>
<div id="chartContainer"></div>
<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", "Type":"Sunrise", "Time":"08:10" },
  { "Date":"01/01/2018", "Type":"Sunset", "Time":"17:20" },
  { "Date":"02/01/2018", "Type":"Sunrise", "Time":"08:08" },
  { "Date":"02/01/2018", "Type":"Sunset", "Time":"17:25" },
  { "Date":"03/01/2018", "Type":"Sunrise", "Time":"08:06" },
  { "Date":"03/01/2018", "Type":"Sunset", "Time":"17:30" },
  { "Date":"04/01/2018", "Type":"Sunrise", "Time":"08:04" },
  { "Date":"04/01/2018", "Type":"Sunset", "Time":"17:35" },
  { "Date":"05/01/2018", "Type":"Sunrise", "Time":"08:02" },
  { "Date":"05/01/2018", "Type":"Sunset", "Time":"17:40" },
  { "Date":"06/01/2018", "Type":"Sunrise", "Time":"08:00" },
  { "Date":"06/01/2018", "Type":"Sunset", "Time":"17:45" }
];

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

// X轴：日期时间轴，解析格式是日/月/年，显示成"日 月缩写"（比如01 Jan）
var x = myChart.addTimeAxis("x", "Date", "%d/%m/%Y", "%d %b");
// Y轴：时间轴，解析小时:分钟，显示同样格式
var y = myChart.addTimeAxis("y", "Time", "%H:%M", "%H:%M");

// 关键：用"Type"字段区分系列，这样会自动生成日出、日落两条线
var series = myChart.addSeries("Type", dimple.plot.line, [x, y]);
series.lineMarkers = true; // 显示每个数据点的标记

myChart.addLegend(180, 10, 360, 20, "right");
myChart.draw();
</script>
</html>

关键知识点解释

数据格式转换：宽格式转长格式是Dimple处理多系列的常用方式，每个系列对应数据中的一个「类型」字段值，这样addSeries就能自动识别并生成多条线。
时间轴的选择：addTimeAxis会把时间当作连续的数值处理，能正确展示时间的先后顺序和间隔，比addCategoryAxis更适合你的场景——后者会把日期当成离散的类别，无法体现时间的连续性。
格式字符串：注意addTimeAxis的第三个参数是解析格式（告诉Dimple怎么读你的数据），第四个是显示格式（图表上展示的样式），要和你的数据格式对应上，比如你的日期是日/月/年，所以解析格式用%d/%m/%Y。