如何在Highcharts CSS樣式模式下支持舊式樣式選項（如series.color）

我正在嘗試將大量圖表更新到新Highcharts CSS styled mode。其中一些圖表使用樣式的傳統API選項，如series.color和point.color - Highcharts的CSS分支不再支持這些選項。如何在Highcharts CSS樣式模式下支持舊式樣式選項（如series.color）

有沒有辦法讓我補充支持這些顏色選項以提供向後兼容性？比如通過擴展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

來源

2017-02-20 supertrue

您可以使用Highcharts.chart.userOptions得到的值傳遞。

在series和series.data屬性上循環時，您可以看到是否有任何color屬性相應地設置和更新樣式。

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>

來源

2017-02-21 01:10:35

如何在Highcharts CSS樣式模式下支持舊式樣式選項（如series.color）

回答

相關問題