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]

Answer 2

我终于找到了为每列显示超过1种颜色的方法：

 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
        });

如何使用highcharts创建列char，其中每列具有不同的颜色

2 个答案: