0

Combo DUal Axes をドリルダウンで使用しようとしていますが、バーをクリックしても機能しません。

別の質問ですが、2 番目のデータ (スプライン) もドリルダウンを使用する必要がありますか? または、最初のデータ(列)でのみ使用できます。

これは私の 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