Question

我在我的reactjs项目中使用折线图（highcharts），要求是2015年之后的数据，折线应显示为虚线，而2015年折线之前的数据应显示为实线（不虚线）。有什么办法可以实现这一目标吗？我检查了highchart文档，在series-> data内有一个称为className的属性，但不知道该怎么做？有人可以帮我吗？

Answer 1

例如，您有2个系列。一个系列是第一个索引的2015年之后的数据和第二个索引的2015年之前的数据。并且您需要添加highcharts支持的“ dashStyle”。下面的示例代码将为您提供帮助：

series: [
{
    data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
    dashStyle: 'longdash'
},
{
    data: [6, 7, 8, 9, 10, 11, 6, 2, 24, 5, 9],
    dashStyle: 'solid' // or none dashStyle for 'solid' type
}
]

Answer 2

您可以使用zones功能来达到想要的效果。

演示：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-dashstyle-dot/

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    zoneAxis: 'x',
    zones: [{
        value: 8
    }, {
        dashStyle: 'dot'
    }]
}]

API：https://api.highcharts.com/highcharts/series.line.zones.value

如何在折线图中显示实线和虚线

2 个答案: