如何在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）

回答

相关问题