javascript - 如何使用 highcharts 创建列字符，其中每列都有不同的颜色

Question

我有一个使用 highcharts 的图表，唯一的问题是每列都有相同的列。我应该怎么做才能让每一列都有不同的列。这是我的代码:

var charts = [];
$containers = $('#container1');
var datasets = [
{
    name: 'Tokyo',
    data: [49, 57]
}];
var cat = ['A', 'B'];

console.log(datasets);
$.each(datasets, function(i, dataset) {
    console.log(dataset);
    charts.push(new Highcharts.Chart({
        chart: {
            renderTo: $containers[i],
            type: 'column',
            marginLeft: i === 0 ? 100 : 10
        },
        title: {
            text: dataset.name,
            align: 'left',
            x: i === 0 ? 90 : 0
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: cat,
            labels: {
                enabled: i === 0
            }
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: null
            }
        },
        legend: {
            enabled: false
        },
        series: [dataset]
    }));
}); 

提前致谢。

Answer 1

要使每列具有不同的颜色，您只需将 colorByPoint 属性设置为 true。

引用:

• http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint

或者，您可以将每一列设为一个单独的系列，这为您提供了额外的控制级别。

OTOH，在大多数情况下，为每列设置单独的颜色没有任何意义，只会使数据变得杂乱和困惑，并使用户在认知上更加努力地解释图表。

如果您出于特定原因想要突出显示单个列，可以通过将 fillColor 属性添加到数据数组来实现:

类似于:

data:[2,4,5,{y:9,fillColor:'rgba(204,0,0,.75)',note:'Wow, look at this one'},4,5,6]