Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/425.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Highcharts:组合双轴和向下钻取_Javascript_Charts_Highcharts - Fatal编程技术网

Javascript Highcharts:组合双轴和向下钻取

Javascript Highcharts:组合双轴和向下钻取,javascript,charts,highcharts,Javascript,Charts,Highcharts,我尝试使用组合双轴和向下钻取,但当我单击该条时,它不起作用 另一个问题,第二个数据(样条曲线)是否也需要使用向下钻取?或者,我只能将其用于firts数据(列) 这是我的JSFIDLE: 代码,因为我不能离开没有它的链接 $(function () { function setChart(name, categories, data, color) { chart.xAxis[0].setCategories(categories, false);

我尝试使用组合双轴和向下钻取,但当我单击该条时,它不起作用

另一个问题,第二个数据(样条曲线)是否也需要使用向下钻取?或者,我只能将其用于firts数据(列)

这是我的JSFIDLE:

代码,因为我不能离开没有它的链接

$(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'
                }
            }]
        });
    });

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

"Uncaught ReferenceError: chart is not defined "
所以,您只需定义图表,例如:

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

参见示例:

Oops,我已经解决了,但是现在我有另一个问题,当我想从深入分析中返回时,我怎么能从数据2中释放yAxis并从数据1中获取yAxis呢。这是我的例子: