0

我正在尝试使用带有向下钻取的组合双轴，但是当我单击该栏时它不起作用。

另一个问题，第二个数据（样条）是否也需要使用向下钻取？或者我只能将它与第一个数据（列）一起使用。

这是我的 jsfiddle：http: //jsfiddle.net/QDzpj/

和代码导致我不能离开没有它的链接。

$(function () {
     function setChart(name, categories, data, color) {
            chart.xAxis[0].setCategories(categories, false);
            chart.series[0].remove(false);
            chart.addSeries({
                name: name,
                data: data,
                color: color || 'white'
            },false);
            chart.redraw();
        }

        var colors = Highcharts.getOptions().colors;
    var categories = ['MSIE', 'Firefox', 'Chrome'],
            name = 'Browser brands',
            data = [
                    {
                        y:49.9, 
                        drilldown: {
                            name: 'MSIE versions',
                            categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                            data: [10.85, 7.35, 33.06, 2.81],
                            color: colors[0]
                        }
                    }, 
                    {
                        y:71.5,
                        drilldown: {
                            name: 'Firefox versions',
                            categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
                            data: [0.20, 0.83, 1.58, 13.12, 5.43],
                            color: colors[1]
                        }
                    }, {
                        y:106.4,
                        drilldown: {
                            name: 'Chrome versions',
                            categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                                'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
                            data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
                            color: colors[2]
                        }
                    }];

        $('#container').highcharts({
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: 'Average Monthly Temperature and Rainfall in Tokyo'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar']
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: '#89A54E'
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: '#89A54E'
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Rainfall',
                    style: {
                        color: '#4572A7'
                    }
                },
                labels: {
                    format: '{value} mm',
                    style: {
                        color: '#4572A7'
                    }
                },
                opposite: true
            }],
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                } else { // restore
                                    setChart(name, categories, data);
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return this.y +'%';
                        }
                    }
                }
            },
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 120,
                verticalAlign: 'top',
                y: 100,
                floating: true,
                backgroundColor: '#FFFFFF'
            },
            series: [{
                name: 'Rainfall',
                //color: '#4572A7',
                type: 'column',
                yAxis: 1,
                data: data,
                tooltip: {
                    valueSuffix: ' mm'
                }
            }, {
                name: 'Temperature',
                color: '#89A54E',
                type: 'spline',
                data: [7.0,6.9, 9.5],
                tooltip: {
                    valueSuffix: '°C'
                }
            }]
        });
    });
4

1 回答 1

1

你的控制台说你做错了什么。

"Uncaught ReferenceError: chart is not defined "

所以你只需要定义图表，例如：

var chart = $("#container").highcharts();

见例子：http: //jsfiddle.net/QDzpj/1/

于 2013-04-10T11:30:55.940 回答