如何使用高图创建列字符，其中每列具有不同的颜色答案

【问题标题】：how to create a column char with highcharts where each column has a different color如何使用高图创建列字符，其中每列具有不同的颜色
【发布时间】：2014-12-18 18:41:08
【问题描述】：

我有一个使用 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]
    }));
});

提前致谢。

【问题讨论】：

标签： javascript jquery json highcharts

【解决方案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]

【讨论】：

【解决方案2】：

我终于找到了一种方法，可以为每列显示一种以上的颜色：

 var charts1 = [];
     var $containers1 = $('#container1');
     var datasets1 = [{
                    name: 'Dalias',
                    data: [29]
                },
                {
                    name: 'Lilas',
                    data: [1]
                },
                {
                    name: 'Tulipanes',
                    data: [15]
                }];
        $('#container1').highcharts({
            chart: {
                type: 'column',
                backgroundColor: 'transparent'
            },
            title: {
                text: 'Montos pedidos por división'
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color};" />{series.name} </span>:<b>{point.y}</b>',
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                },
                series : {
                    cursor: 'pointer',
                    point: {
                        events: {
                            /*click: function() {
                                verDetalle("Especialidades,"+ this.series.name);
                            }*/
                        }
                    }
                }
            },
            credits:{
                enabled: false
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            xAxis: {
                categories: ['División']
            },
            series: datasets1
        });

【讨论】：