Question

我有一个与此相似的图表：

    // create the chart
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },

            title: {
                text: 'SOTMP Checklist Compliance History'
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {

                categories: ['Category 9',
                             'Category 8',
                             'Category 7',
                             'Category 6',
                             'Category 5',
                             'Category 4',
                             'Category 3',
                             'Category 2',
                             'Category 1'],
                tickInterval: 1,            
                tickPixelInterval: 200,
                labels: {
                    style: {
                        color: '#525151',
                        font: '12px Helvetica',
                        fontWeight: 'bold'
                    },
                   /* formatter: function() {
                        if (tasks[this.value]) {
                            return tasks[this.value].name;
                        }
                    }*/
                },
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Criteria'
                },
                minPadding: 0.2,
                maxPadding: 0.2,
                   fontSize:'15px'

            },

            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ tasks[this.y].name + '</b><br/>' +
                        Highcharts.dateFormat('%m-%d-%Y', this.point.options.from)  +
                        ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); 
                }
            },

            plotOptions: {
                line: {
                    lineWidth: 10,
                    marker: {
                        enabled: false
                    },
                    dataLabels: {
                        enabled: true,
                        align: 'left',
                        formatter: function() {
                            return this.point.options && this.point.options.label;
                        }
                    }
                }
            },

            series: series

        });

我需要将第三个类别栏的颜色更改为红色，并保持第二个黄色的颜色，并对其他类别进行同样的思考，即水平栏超过一个。

我应该做什么配置？

同一类别的条形必须具有不同的颜色。

感谢关注

Answer 1

您可以将具有两个点的每条线视为一个系列，这将使您轻松设置颜色：

     var series = [];
     $.each(tasks.reverse(), function(i, task) {

       $.each(task.intervals, function(j, interval) {
         var item = {
           name: task.name,
           color: interval.color
         };

         item.data = [{
           x: interval.from,
           y: i,
           label: interval.label,
           from: interval.from,
           to: interval.to
         }, {
           x: interval.to,
           y: i,
           from: interval.from,
           to: interval.to
         }];

         series.push(item);
       });
     });

实时演示：http://jsfiddle.net/BlackLabel/mdkvsj6n/

API参考：https://api.highcharts.com/highcharts/series.line.color

Answer 2

您可以使用Multicolor系列插件（使用此插件，无需将相同类别中的点放到不同系列中）：

http://blacklabel.github.io/multicolor_series/

https://www.highcharts.com/products/plugin-registry/single/33/Multicolor%20series

您可以通过以下方式着色您的观点：

series[6].data[0].segmentColor = 'blue'

但是您必须添加Multicolor系列模块：

<script src="https://blacklabel.github.io/multicolor_series/js/multicolor_series.js"></script>

并将图表类型更改为彩色线：

chart: {
  renderTo: 'container',
  type: 'coloredline'
},

一个例子：https://jsfiddle.net/BlackLabel/bavm762o/

您的图表：http://jsfiddle.net/BlackLabel/0fudaovy/

高位图表更改水平条的颜色

2 个答案: