Схема или граница для ряда сплайнов в старших графиках

Question

Я создал график с использованием старших графиков, который состоит из 6 серий. 3 - ряд столбцов, а 3 - ряд сплайнов. Ряды сплайнов сталкиваются или попадают в столбчатую диаграмму, поэтому необходимо добавить контур в ряды сплайнов для лучшего обзора. Попытка добавить цвет границы для ряда сплайнов, но не удается. Но то же самое возможно в столбчатой ​​диаграмме. Если кто-то пробовал это раньше для серии сплайнов, пожалуйста, помогите.

plotOptions: {
        series: {
            borderColor: '#303030'
        }
    },

этот цвет границы работает для столбца, но не в сплайновой серии

столбчатая диаграмма http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-bordercolor/

хотел бы иметь границу для следующих серий http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-box/

Answer 1

В Highcharts нет такой функции для установки границы линии, но еще не все потеряно.

Вы можете добиться желаемого эффекта, добавив новые «поддельные» серии на основе каждой серии линий и задав пару параметров. Лучшее место (в коде) для этого - функция chart.events.load, поэтому просто найдите все серии с типом line:

chart: {
  events: {
    load() {
       var series = this.series.filter(elem => elem.type === 'line')
    }
  }
}

Затем выполните итерацию по всем найденным рядам и создайте новый, чтобы он имел color: [color_you_want], те же самые данные и marker.symbol, увеличенные lineWidth, а также marker.radius, которые не будут доступны для мышь и не видна в легенде, как показано ниже:

chart: {
    events: {
      load() {
        var series = this.series.filter(elem => elem.type === 'line')
        series.forEach(series => {
          this.addSeries({
            data: series.userOptions.data,
            showInLegend: false,
            color: '#000',
            enableMouseTracking: false,
            zIndex: -9999,
            marker: {
              symbol: series.symbol,
              radius: series.options.marker.radius + 1
            },
            lineWidth: series.options.lineWidth + 2
          })
        })
      }
    }
  }

Надеюсь, это поможет вам.

Живой пример: http://jsfiddle.net/yw2tb4nm/

Справочник по API:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/highcharts/series.line.marker.symbol

https://api.highcharts.com/highcharts/series.line.marker.radius

https://api.highcharts.com/highcharts/series.line.showInLegend

https://api.highcharts.com/highcharts/series.line.enableMouseTracking