Как поддерживать устаревший стиль (например, series.color) в режиме Highcharts CSS styleed

Question

Я пытаюсь обновить большое количество диаграмм для новых Highcharts CSS styled mode. Некоторые из этих диаграмм используют устаревшие параметры API для стилей, например series.color и point.color, которые больше не поддерживаются в ветке CSS Highcharts.

Есть ли способ для поддержки этих параметров цвета для обеспечения обратной совместимости? Например, расширив renderer или что-то еще?

Вот пример из серии и опций точечных я хотел бы поддержать:

Highcharts.chart('container', { 
    chart: { type: 'column' }, 
    series: [{ 
     color: 'red', 
     data: [1, {y: 8, color: 'green'}, 3] 

    }, { 
     data: [4, {y: 3, color: 'purple'}, 4] 
    }] 
}); 

On JSFiddle

Answer 1

Вы можете использовать Highcharts.chart.userOptions, чтобы переданные в значениях.

При переходе через series и в свойствах series.data вы можете увидеть, есть ли какие-либо свойства, установленные и соответствующие стилям обновления.

var chart = Highcharts.chart('container', { 
 
    chart: { type: 'column' }, 
 
    series: [{ 
 
     data: [1, {y: 8, color: 'green'}, 3, 4], 
 
     color: 'red' 
 
    }, { 
 
     data: [4, {y: 3, color: 'purple'}, 4, 2] 
 
    }] 
 
}); 
 

 
setLegacyColors(chart.userOptions); 
 

 

 
function setLegacyColors(chartOptions) { 
 

 
    for (var seriesIdx = 0; seriesIdx < chartOptions.series.length; seriesIdx++) { 
 

 
    var series = chartOptions.series[seriesIdx]; 
 
    var seriesColor = series.color; 
 

 
    if (seriesColor) { 
 
     $(".highcharts-point.highcharts-color-" + seriesIdx + ", .highcharts-legend-item.highcharts-color-" + seriesIdx + " .highcharts-point, .highcharts-tooltip .highcharts-color-" + seriesIdx).css('fill', seriesColor); 
 
    } 
 

 
    for (var dataPointIdx = 0; dataPointIdx < series.data.length; dataPointIdx++) { 
 

 
     if (Object(series.data[dataPointIdx]) === series.data[dataPointIdx]) { // only consider datapoints that are objects 
 

 
     var dataPointColor = series.data[dataPointIdx].color; 
 

 
     if (dataPointColor) { 
 
      $(".highcharts-point.highcharts-color-" + seriesIdx + ", .highcharts-legend-item.highcharts-color-" + seriesIdx + " .highcharts-point, .highcharts-tooltip .highcharts-color-" + seriesIdx).eq(dataPointIdx).css('fill', dataPointColor); 
 
     } 
 
     } 
 
    } 
 
    } 
 
}

@import 'https://code.highcharts.com/css/highcharts.css'; 
 

 
#container { 
 
\t height: 200px; 
 
\t max-width: 800px; 
 
\t min-width: 320px; 
 
\t margin: 0 auto; 
 
} 
 

 
/* Since we're redefining colors after highcharts.css, we need to be specific 
 
because otherwise some properties would be overwritten. Note that the preferred and 
 
much simpler way to change the color scheme is to set the colors array in the highcharts.scss 
 
SASS file and build it to CSS. */ 
 
.highcharts-point.highcharts-color-0, 
 
.highcharts-legend-item.highcharts-color-0 .highcharts-point, 
 
.highcharts-tooltip .highcharts-color-0 { 
 
\t fill: #7cb5ec; 
 
} 
 
.highcharts-tooltip.highcharts-color-0, 
 
.highcharts-data-label-connector.highcharts-color-0 { 
 
\t stroke: #b3597c; 
 
} 
 

 
.highcharts-point.highcharts-color-1, 
 
.highcharts-legend-item.highcharts-color-1 .highcharts-point, 
 
.highcharts-tooltip .highcharts-color-1 { 
 
\t fill: #434348; 
 
} 
 
.highcharts-tooltip.highcharts-color-1, 
 
.highcharts-data-label-connector.highcharts-color-1 { 
 
\t stroke: #c4688c; 
 
} 
 

 
.highcharts-point.highcharts-color-2, 
 
.highcharts-legend-item.highcharts-color-2 .highcharts-point, 
 
.highcharts-tooltip .highcharts-color-2 { 
 
\t fill: #90ed7d; 
 
} 
 
.highcharts-tooltip.highcharts-color-2, 
 
.highcharts-data-label-connector.highcharts-color-2 { 
 
\t stroke: #78a8d1; 
 
} 
 

 
.highcharts-point.highcharts-color-3, 
 
.highcharts-legend-item.highcharts-color-3 .highcharts-point, 
 
.highcharts-tooltip .highcharts-color-3 { 
 
\t fill: #f7a35c; 
 
} 
 
.highcharts-tooltip.highcharts-color-3, 
 
.highcharts-data-label-connector.highcharts-color-3 { 
 
\t stroke: #7991d2; 
 
} 
 

 
.highcharts-point.highcharts-color-4, 
 
.highcharts-legend-item.highcharts-color-4 .highcharts-point, 
 
.highcharts-tooltip .highcharts-color-4 { 
 
\t fill: #8085e9; 
 
} 
 
.highcharts-tooltip.highcharts-color-4, 
 
.highcharts-data-label-connector.highcharts-color-4 { 
 
\t stroke: #7d7bd4; 
 
} 
 

 
.highcharts-point.highcharts-color-5, 
 
.highcharts-legend-item.highcharts-color-5 .highcharts-point, 
 
.highcharts-tooltip .highcharts-color-5 { 
 
\t fill: #f15c80; 
 
} 
 
.highcharts-tooltip.highcharts-color-5, 
 
.highcharts-data-label-connector.highcharts-color-5 { 
 
\t stroke: #977dd5; 
 
} 
 

 
.highcharts-point.highcharts-color-6, 
 
.highcharts-legend-item.highcharts-color-6 .highcharts-point, 
 
.highcharts-tooltip .highcharts-color-6 { 
 
\t fill: #e4d354; 
 
} 
 
.highcharts-tooltip.highcharts-color-6, 
 
.highcharts-data-label-connector.highcharts-color-6 { 
 
\t stroke: #b3597c; 
 
} 
 

 
.highcharts-point.highcharts-color-7, 
 
.highcharts-legend-item.highcharts-color-7 .highcharts-point, 
 
.highcharts-tooltip .highcharts-color-7 { 
 
\t fill: #2b908f; 
 
} 
 
.highcharts-tooltip.highcharts-color-7, 
 
.highcharts-data-label-connector.highcharts-color-7 { 
 
\t stroke: #b27fd6; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/js/highcharts.js"></script> 
 

 
<div id="container"></div>