Question

我的下图是

我想要的是为那些具有不同颜色的列着色，这些颜色的值恰好为8.00

这是我的代码

 $(document).ready(function () { });
angular.module('myModule', []).service("AttendanceService", function ($http) {
    this.getdata = function () {
        return $http({
            method: "post",
            url: "GetAttendanceReport",
            params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
            dataType: "json"
        });
    };
}).controller('myController', function ($scope,AttendanceService) {
  GetAlldata();
    function GetAlldata() {
        var getAttendanceData = AttendanceService.getdata();
        getAttendanceData.then(function (Attendances) {
            Highcharts.chart('container', {
               chart: {
                      type: 'column',
                      events: {
                          drilldown: function () {

                              this.yAxis[0].addPlotLine({
                                  id: 'p1',
                                  value: 8,
                                  color: '#ff0000',
                                  width: 2,
                                  zIndex: 4,
                                  label: {
                                      text: 'goal'
                                  }
                              })
                          },
                          drillup: function () {
                              this.yAxis[0].removePlotLine('p1');
                          }
                      },
                  }
                title: {
                    text: 'Attendance Report' + ' ' + $("#YearIn option:selected").text()
                },
                xAxis: {
                    type: 'category'
                },
                 yAxis: {
                        title: {
                            text: 'Total Attendance Recorded',
                            plotLines: [{
                                id: 'p1',
                                value: 8,
                                color: '#ff0000',
                                width: 2,
                                zIndex: 4,
                                label: {
                                    text: 'goal'
                                }
                            }]
                        },

                    }
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.2f}'
                        }
                    }
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}mins</b> of total<br/>'
                },

                series: [{
                    name: 'Attendance',
                    colorByPoint: true,
                    data: [{
                        name: 'Jan',
                        y: Attendances.data.YearlyReport[0],
                        drilldown: 'Jan'
                    }, {
                        name: 'Feb',
                        y: Attendances.data.YearlyReport[1],
                        drilldown: 'Feb'
                    }, {
                        name: 'March',
                        y: Attendances.data.YearlyReport[2],
                        drilldown: 'March'
                    }, {
                        name: 'April',
                        y: Attendances.data.YearlyReport[3],
                        drilldown: 'April'
                    }, {
                        name: 'May',
                        y: Attendances.data.YearlyReport[4],
                        drilldown: 'May'
                    }, {
                        name: 'June',
                        y: Attendances.data.YearlyReport[5],
                        drilldown: 'June'
                    }, {
                        name: 'July',
                        y: Attendances.data.YearlyReport[6],
                        drilldown: 'July'
                    }, {
                        name: 'Aug',
                        y: Attendances.data.YearlyReport[7],
                        drilldown: 'Aug'
                    }, {
                        name: 'Sep',
                        y: Attendances.data.YearlyReport[8],
                        drilldown: 'Sep'
                    }, {
                        name: 'Oct',
                        y: Attendances.data.YearlyReport[9],
                        drilldown: 'Oct'
                    }, {
                        name: 'Nov',
                        y: Attendances.data.YearlyReport[10],
                        drilldown: 'Nov'
                    }, {
                        name: 'Dec',
                        y: Attendances.data.YearlyReport[11],
                        drilldown: 'Dec'
                    }]
                }],
                drilldown: {
                    series: 
                        [{
                        name: 'Jan',
                        id: 'Jan',
                        data: [
                            [
                                '1',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1])

                            ],
                            [
                                '2',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2])
                            ],
                            [
                                '3',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3])
                            ],
                            [
                                '4',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 4])
                            ],
                            [
                                '5',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 5])
                            ],
                            [
                                '6',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 6])
                            ],
                            [
                                '7',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 7])
                            ],
                            [
                                '8',
                               parseFloat(Attendances.data.MonthlyReport[1 * 33 + 8])
                            ],
                            [
                                '9',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 9])
                            ],
                            [
                                '10',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 10])
                            ],
                            [
                                '11',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 11])
                            ],
                            [
                                '12',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 12])
                            ],
                            [
                                '13',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 13])
                            ],
                            [
                                '14',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 14])
                            ],
                            [
                                '15',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 15])
                            ],
                            [
                                '16',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 16])
                            ],
                            [
                                '17',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 17])
                            ],
                            [
                                '18',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 18])
                            ],
                            [
                                '19',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 19])
                            ],
                            [
                                '20',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 20])
                            ],
                            [
                                '21',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 21])
                            ],
                            [
                                '22',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 22])
                            ],
                            [
                                '23',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 23])
                            ],
                            [
                                '24',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 24])
                            ],
                            [
                                '25',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 25])
                            ],
                            [
                                '26',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 26])
                            ],
                            [
                                '27',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 27])
                            ],
                            [
                                '28',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 28])
                            ],
                            [
                                '29',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 29])
                            ],
                             [
                                '30',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 30])
                             ],
                             [
                                '31',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 31])
                             ]
                        ]},and so on]
                }
            });
        }, function () {
            alert('Error in getting records');
        });

    } $("#btnLoad").click(function (event) {
        GetAlldata();
    });
    $("#btnBack").click(function (event) {
        window.location.href = "homepage";
    });
});

我使用了具有向下钻取高图的Column。有什么办法吗？

Answer 1

您可以直接将属性color传递给系列的数据点，如下所示：

color: '#00ff00'

然后，您只需循环浏览数据并替换这些点的颜色。

JsFiddle

Answer 2

您可以在Stack Overflow上的其他地方找到此问题：Highcharts Change Bar Color Based on Value。请参考接受的答案，该答案包含迭代系列的代码，并根据它们的值对它们进行着色。

如何在我的高图表中为某些特定列使用不同的颜色？

2 个答案: