Highcharts - 错误栏更改图例符号

时间:2017-11-07 21:51:12

标签: highcharts

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

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'},
      }]

1 个答案:

答案 0 :(得分:1)

修改

我误解了OP并提供了将标记添加到errorbar系列的解决方法(可以在 END OF EDIT 标题之后找到)。这里的问题是将它们添加到图例中。

图例中标记的解决方法

如前所述:错误栏不支持标记。默认的“大”圆圈符号将用作图例标记。

此处的解决方法是创建没有数据但具有正确标记定义的幻像散点图系列。然后为原始系列禁用showInLegend并将其链接到幻像1:

 // 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

END OF EDIT

错误栏不支持标记。似乎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/

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