使用 Highcharts 绘制直线图或单线图

Question

我想使用 Highcharts（或类似的）将道路属性数据显示为直线图或单线图，但我找不到任何对于非程序员来说很容易适应的示例。是否可以使用公开可用的图表制作软件使用多种颜色在单行上显示线性参考数据？

我想实现的目标：

我发现的一个例子让我希望这是可能的： 如何使用highcharts绘制单线图

其他需求：我想显示多个属性，例如：表面类型、人行道、路肩类型等。这将需要在同一页面/图形/图表/框架上为给定道路 ID 的每个属性提供多个线条/颜色图例所有线共享相同的 x 轴。如果这些线可以同步平移和缩放，那就太理想了。

Answer 1

您可以使用 Highcharts 库中的条形系列创建这样的图表。当您将堆叠选项设置为正常时，每个点应该是一个单独的系列。此外，您可以使用一些额外的 Highcharts 选项将图表调整为您喜欢的外观。

API参考： https://api.highcharts.com/highcharts/series.bar.stacking https://api.highcharts.com/highcharts/yAxis.tickPositions

演示： https://jsfiddle.net/BlackLabel/tv9j65n4/

series: [{
 name: 'UNPAVED',
 data: [5]
}, {
 name: 'CONCRETE',
 data: [1]
}, {
 name: 'BITUMINOUS',
 data: [4]
}]