javascript - 如何更改图表中柱形的颜色?

标签 javascript jquery highcharts highcharts-ng

我正在使用 highchart 库制作一个 skacked 柱形图。 我们可以改变图表的颜色..?有三种颜色显示(蓝色,黑色,绿色)。有没有办法改变默认颜色(黄色,粉色,红色)

我需要更改列的颜色吗?

fiddle http://jsfiddle.net/cr91t8wj/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

最佳答案

使用数据指定颜色,如下所示:

name: 'Joe',
data: [3, 4, 4, 2, 5],
color: '#FF0000'

关于javascript - 如何更改图表中柱形的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34413086/

相关文章:

javascript - 我的 Angular 2 应用程序中的这个 Observable 无法正常工作吗?

javascript - Meteor 中的 jQuery 无法找到 DOM 选择器

javascript - TinyMCE 可以将超链接自动转换为 anchor 吗?

jquery - 我无法让最后选择的日期显示在日期选择器中

javascript - jsTree:如何在刷新后选择节点

r - 使用 rCharts 包创建气泡图(Highcharts)

javascript - 表单未使用 javascript 进行验证?

javascript - jQuery 或纯 JS : execute function after event listener returns

javascript - 图形从轴+网格线开始

javascript - 在 Highcharts 中,如何为多金字塔图表中的每个金字塔设置标题