Question

所需的输出：我将有一个动态生成的高图，我需要能够在类别中添加ID，这样当他们点击某个类别时，我可以将其传递给模态进行深入研究。

我看到有关向系列添加数据的问题，但不是类别。

当前代码：（这尚未动态生成，仍在测试中）

 $('#ChartContainer2').highcharts({

            chart: {
                type: 'bar',
                options3d: {
                    enabled: true,
                    alpha: 20,
                    beta: 20,
                    viewDistance: 0,
                    depth: 70
                },
                marginTop: 90,
                marginBottom: 80
            },

            title: {
                text: 'Category Reset Pacing'
            },
            plotOptions: {
                bar: {
                    stacking: 'normal',
                    depth: 25
                },
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function ()
                            {
                                $("#PacingModal").modal('show');                            
                                var Status = this.series.name;
                                var Cat = this.category; 
                                //get category id, something like
                                var ID = this.category.id;     
                            }
                        }
                    },
                    animation: {
                        duration: 3000,
                        easing: 'easeOutBounce',
                    },
                }
            },
            tooltip: {

                useHTML: true,
                shared: true,
                headerFormat: '<small>{point.key}</small><table>',
                pointFormat: '<tr><td style="color: {series.color}">{series.name}:</td>' +
                    '<td style="text-align: right"><b>{point.y}%</b></td></tr>',
                footerFormat: '</table>',

            },
            xAxis: {
                //i need to add an ID to each category
                categories: ['15-05 SFYBAKE Brooklyn Bred - Bakery Rack Display (NOR) Brooklyn Bred Rack in Bakery',
                    '15-05 SFYBAKE Brooklyn Bred - Bakery Rack Display (NOR) Brooklyn Bred Rack in Bakery',
                    '15-05 SFYBAKE Brooklyn Bred - Bakery Rack Display (NOR) Brooklyn Bred Rack in Bakery',
                    '15-05 SFYBAKE Brooklyn Bred - Bakery Rack Display (NOR) Brooklyn Bred Rack in Bakery',
                    '15-05 SFYBAKE Brooklyn Bred - Bakery Rack Display (NOR) Brooklyn Bred Rack in Bakery',
                    '15-05 SFYBAKE Brooklyn Bred - Bakery Rack Display (NOR) Brooklyn Bred Rack in Bakery',
                    '15-05 SFYBAKE Brooklyn Bred - Bakery Rack Display (NOR) Brooklyn Bred Rack in Bakery',
                    '15-05 SFYBAKE Brooklyn Bred - Bakery Rack Display (NOR) Brooklyn Bred Rack in Bakery',

                ]
            },
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Percent Complete'
                }
            },

            series: [  {
                name: 'Not Complete',
                data: [30, 3, 5, 0, 5, 8, 0, 13],

            },{
                name: 'Clean Up',
                data: [10, 14, 11, 10, 15, 8, 0, 3],

            },
            {
                name: 'Complete',
                data: [60, 65, 78, 70, 45, 58, 80, 35],

            } ]
        });

已更新：使用以下答案后，我发现只有这样才能使标签可点击。我需要整个栏可以点击。下面是我更新的代码，其中包含了我想要整个条形图可点击的内容。

我得到＆＃34;未捕获的TypeError：无法读取属性＆＃39; undefined＆＃39;未定义＆＃34;。

对上述代码进行了这些更改。

    var categoryLinks = [
   ['Foo', 'http://www.google.com/search?q=foo'],
   ['Bar', 'http://www.google.com/search?q=foo+bar'],
   ['Foobar', 'http://www.google.com/serach?q=foobar'],
     ['Foo', 'http://www.google.com/search?q=foo'],
   ['Bar', 'http://www.google.com/search?q=foo+bar'],
   ['Foobar', 'http://www.google.com/serach?q=foobar']
    ];

Some code...

        plotOptions: {
            bar: {
                stacking: 'normal',
                depth: 25
            },
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function ()
                        {


     //Here is where I am trying to redirect on the bar click, not just the label          

     window.location.replace(this.categoryLinks[this.value][1]);


      //Also tried 
      window.location.replace(this.category.categoryLinks[this.value][1]); 


More code...

});

Answer 1

以下是xAxis.label.formatter中API的明确示例： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-formatter-linked/

基本上他们正在做的是创建一个类别对象列表：

var categoryLinks = {
    'Foo': 'http://www.google.com/search?q=foo',
    'Bar': 'http://www.google.com/search?q=foo+bar',
    'Foobar': 'http://www.google.com/serach?q=foobar'
};

然后使用label.formatter仅使用值显示带有链接的人类可读文本：

    labels: {
        formatter: function () {
            return '<a href="' + categoryLinks[this.value] + '">' +
                this.value + '</a>';
        }
    }

对于您需要点击栏上转到网址的修改后的问题，请查看API plotOptions.series.point.events.click。有一个明确的例子就是点击点击URL。

Answer 2

在Highchart中保持id与类别的简单方法。您可以在点击事件中获取每个类别ID。 Please see the working code in jsfiddle

objData={}
objData[0]= {
"category": ["January","February","March","April","May","June","July","August"],
"score":[48,25,0,80,71,100,100,44],
"id":["01","02","03","04","05","06","07","08"],
"year":"2016",
"Y":"2016",
"minimum":[60,60,60,60,60,60,60,60]
};

$(function () {
            $('#chart').highcharts({credits: {
                    enabled: false
                },
                title: {text: 'Company Performance', x: -20},
                subtitle: {text: 'For the year of' + objData[0].year, x: -20},
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function () {
                                    data = {
                                    month: objData[0].id[this.x],
                                    year: objData[0].Y
                                    };
                                   alert( objData[0].id[this.x]);
                                }
                            }
                        }
                    }
                },
                xAxis: {categories: objData[0].category},
                yAxis: {title: {text: 'Percentage'}, plotLines: [{value: 0, width: 1, color: '#808080'}]},
                tooltip: {valueSuffix: '%'},
                legend: {layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0},
                series: [{name: 'Min Score', color: '#A30000', data: objData[0].minimum}, {name: 'Score', color: '#10AEDE', data: objData[0].score}],
            });
        });

如何将类别ID添加到高级图表类别

2 个答案: