Highcharts-错误栏更改图例符号



是否可以更改错误条形图的图例符号?我有最大值和最小值的误差条,与显示平均值的样条曲线图重叠。我希望最小值和最大值的图例符号是三角形和正方形,但序列标记属性没有任何影响。带误差条的样条

series: [{
name: 'Average',
type: 'spline',
color: 'transparent',
marker: { fillColor: '#2B767F', symbol: 'circle'},
data: [33]
},
{
name: 'Max',
type: 'errorbar',
color: '#2B767F',
marker: { fillColor: '#2B767F', symbol: 'triangle'},
data: [[33,68]],
linkedTo: null,
whiskerLength: 10
},
{
name: 'Min',
type: 'errorbar',
color: '#2B767F',
data: [[5,33]],
linkedTo: null,
whiskerLength: 10,
marker: { fillColor: '#2B767F', symbol: 'square'},
}]

编辑

我误解了OP,并提供了将标记添加到错误栏系列的解决方法(它可以在编辑结束标题之后找到)。这里的问题是将它们添加到图例中。

图例中标记的解决方法

正如我之前提到的:错误条不支持标记。默认的"大"圆圈符号将用作图例标记。

这里的解决方法是创建没有数据但具有正确标记定义的幻影散射序列。然后禁用原始系列的showInLegend,并将其链接到幻影系列:

// series
{
name: 'Max',
type: 'scatter',
color: '#2B767F',
marker: {
fillColor: '#2B767F',
symbol: 'triangle'
},
}, {
name: 'Max_',
type: 'errorbar',
color: '#2B767F',
data: [
[33, 68]
],
whiskerLength: 10,
showInLegend: false,
linkedTo: ':previous'
}

现场演示:http://jsfiddle.net/kkulig/1hLq2y5v/

API参考:https://api.highcharts.com/highcharts/series.errorbar.linkedTo

编辑结束


错误条不支持标记。API中似乎存在一个缺陷:https://api.highcharts.com/highcharts/series.errorbar.marker.enabled

启用标记对错误条序列没有影响。

解决方案1

您可以将箱线图转换为散射系列(开关连接点):http://jsfiddle.net/kkulig/yg36swfa/

plotOptions: {
scatter: {
lineWidth: 1
}
}

解决方案2

仅对须点使用散射。将whiskerLength设置为0,并将散射点放置在相同的位置。禁用此类系列的图例和工具提示:

plotOptions: {
scatter: {
showInLegend: false,
tooltip: {
pointFormat: false
}
}
}

现场演示:http://jsfiddle.net/kkulig/yeLeor1h/

这种解决方法似乎更好,因为它可以维护工具提示的行为。

最新更新