高位图更改堆叠柱形图添加序列的颜色

时间:2020-04-17 10:55:51

标签: highcharts

我正在努力为柱形图添加颜色。下图显示了堆积柱形图的外观,我希望更改配色方案。请注意,该系列已删除,然后通过调用chart_staff.addSeries([data:3,123,21,132,312,132,132,132 ...])动态添加。 哪个工作正常。我只是不知道如何为堆叠图形添加颜色。我已经试过了chart_staff.addSeries([{data:3,123,21,132,312,132,132 ...},color:'#FF00FF']),并且还很难用 颜色:['#FF00FF','#FF00FF','#FF0CCF'...]但更简单的方法...

https://i.stack.imgur.com/JihFb.png

var chart_staff = new Highcharts.chart('summary_id',{ 图表:{ 类型:“列” }, 标题:{ 文字:“” }, xAxis:{ 类型:“类别”, 标签: { allowOverlap:是, 风格:{ fontSize:8 颜色:“#000000”, fontWeight:'bold', }, 第1步, 旋转:-45 }, 类别:[ {%代表学科集%中的光盘} {group_workload [disc.name] .keys()| list | sort%中成员的%} '{{成员}}', {%endfor%} {%endfor%}

            ],
            minTickInterval: 1,
            tickWidth: 0,
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Workload'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        exporting: {
            buttons: {
                contextButton: {
                    menuItems: ['model', 'base', "printChart", "viewFullscreen", "separator", "downloadPNG", "downloadPDF", "downloadCSV", "downloadXLS","viewData"]
                }
            },
            menuItemDefinitions: {
                model: {
                    onclick: function (ev) {
                        apply_model = 1;
                        update_display_data(ev, this);
                        //update_chart_staff(model_display_values_admin, model_display_values_research, model_display_values_1, model_display_values_2, model_display_values_3)
                        update_chart_staff(model_display_values_admin, model_display_values_research, model_display_values_1, model_display_values_2, model_display_values_3)
                        update_chart_discipline(model_total_load_disc_sum)
                        update_chart_load(model_total_load_sum)
                    },
                    text: 'Model'
                },
                base: {
                    onclick: function (ev) {
                        apply_model = 0;
                        update_display_data(ev, this);
                        update_chart_staff(display_values_admin, display_values_research, display_values_1, display_values_2, display_values_3)
                        update_chart_discipline(total_load_disc_sum)
                        update_chart_load(total_load_sum)
                    },
                    text: 'Base'
                }
            },
        },
        legend: {
            align: 'right',
            x: -25,
            verticalAlign: 'top',
            y: -9,
            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}'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            chart: {
                      marginTop: 0,
                      marginBottom: 0,
                      marginLeft: 0,
                      marginRight: 0,
                      plotBackgroundColor: '#f2f2f2',
                      plotBorderWidth: 0,
                      plotShadow: false,
            },
            column: {
                pointPadding: -.2,
                events: {
                    legendItemClick: function (event) {
                        trimester_display_changed(event, this);
                    }

                },
                stacking: 'overlap',
                dataLabels: {
                    enabled: false,
                    allowOverlap: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'green',
                    format: "{y}",
                    distance: -20
                },
                line: {
                    pointInterval: 86400000,
                    pointStart: 1282408923000
                },
            },
            allowPointSelect: false,
        },
        series: [{
            name: 'Admin',
            data: [{% for disc in discipline_set %}{% for member in group_workload[disc.name].keys()|list|sort %}{{ group_workload[disc.name][member]['Admin']  }}, {% endfor %}{% endfor %}],
            color: display_tri_color_base[4]
        },
            {
                name: 'Research',
                data: [{% for disc in discipline_set %}{% for member in group_workload[disc.name].keys()|list|sort %}{{ group_workload[disc.name][member]['Research']}}, {% endfor %}{% endfor %}],
                color: display_tri_color_base[3]
            },
            {
                name: T1_str,
                data: [{% for disc in discipline_set %}{% for member in group_workload[disc.name].keys()|list|sort %}{{ group_workload[disc.name][member]['1']}}, {% endfor %}{% endfor %}],
                color: display_tri_color_base[0]
            },
            {
                name: T2_str,
                data: [{% for disc in discipline_set %}{% for member in group_workload[disc.name].keys()|list|sort %}{{ group_workload[disc.name][member]['2']}}, {% endfor %}{% endfor %}],
                color: display_tri_color_base[1]
            },
            {
                name: T3_str,
                data: [{% for disc in discipline_set %}{% for member in group_workload[disc.name].keys()|list|sort %}{{ group_workload[disc.name][member]['3']}}, {% endfor %}{% endfor %}],
                color: display_tri_color_base[2]
            },
        ]
    });

0 个答案:

没有答案