Highchart IRREGULAR Spline with drilldown - 无法获得深入分析功能

时间:2014-09-19 16:40:20

标签: highcharts spline drilldown

我一直在拉我的头发试图通过向下钻取这个高图不规则样条并且无法使钻取工作。我是高级图表的新手,我认为它可能与我的语法有关。我引用了API并尝试了一些没有运气的方法。

问题:我希望得到一个不规则的样条曲线,以按月显示水果数量。然后,钻取将显示水果类型(苹果和橙子)的计数。我能够显示水果的数量但是钻取不起作用。

代码如下:http://jsfiddle.net/bu2002/352a0zvr/2/

非常感谢所有人!!!

$(document).ready(function(){

var options = {
    chart: {
        renderTo: 'container',
        type: 'spline'
    },
     xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
     yAxis: {
            title: {
                text: 'count'
            },
            min: 0
    },
    series: [{
        name: 'Fruits',
        data: [
            [Date.UTC(2014,  7, 19),12],
            [Date.UTC(2014,  8, 19),5],
            [Date.UTC(2014,  9, 19),18]
        ],
        drilldown: 'fruits'
        },
        {
            name: 'Animals',
            data: [
                [Date.UTC(2014,  7, 29),15],
                [Date.UTC(2014,  8, 11),11],
                [Date.UTC(2014,  9, 22),38]
            ],
            drilldown: 'animals'
        }
    ],//end series
    drilldown: {
        series: [{
                id: 'animals',
                data: [[Date.UTC(2014,  7, 29),15],
                [Date.UTC(2014,  8, 11),11],
                [Date.UTC(2014,  9, 22),38]],
            },
            {
                id: 'fruits',
                data: [
                    [Date.UTC(2014,  7, 29),15],
                    [Date.UTC(2014,  8, 11),11],
                    [Date.UTC(2014,  9, 22),38]
                ],
            }
        ]
    }//end drilldown

};//and options

var chart = new Highcharts.Chart(options);

});

2 个答案:

答案 0 :(得分:2)

问题是你现在正在为这个系列提供drilldown.id。你需要每点做一次。例如:

 series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: 'animals'
            }, {
                name: 'Fruits',
                y: 2,
                drilldown: 'fruits'
            }, {
                name: 'Cars',
                y: 4,
                drilldown: 'cars'
            }]
        }],

在我看来,你想要对#34; Fruits"中的某个点进行深入研究。链接到相同的钻取系列。这是可行的:

series: [{
    name: 'Fruits',
    data: [{
        x: Date.UTC(2014, 7, 19),
        y: 12,
        drilldown: 'fruits'
    }, {
        x: Date.UTC(2014, 8, 19),
        y: 5,
        drilldown: 'fruits'
    }, {
        x: Date.UTC(2014, 9, 19),
        y: 18,
        drilldown: 'fruits'
    }]
},

请参阅更新fiddle

答案 1 :(得分:0)

但是在这里,在单击水果后,U也不会得到2个样条线,而您只能得到1个。 有没有办法解决这个问题,因为我遇到同样的问题 小提琴https://jsfiddle.net/surya_swami/zx9dy3uj/40/

drilldown: {  series: [{id:"z1",name: "Region-1",
                     data: [{ name : "July",y: 10},
                            { name : "Aug",y: 21},
                            { name : "Sept",y: 15}]
                     },
                     {id:"z1",name: "Region-2",
                      data: [{ name : "July",y: 12},
                             { name : "Aug",y: 9},
                             { name : "Sept",y: 25}]
                     },
                     { id:'z2',name:'Region-3',
                       data : [{name:'July',y:23},
                               {name:'Aug',y:41},
                               {name:'Sept',y:31}]
                     },
                     { id:'z2',name:'Region-4',
                       data : [{name:'July',y:33},
                               {name:'Aug',y:23},
                               {name:'Sept',y:12}]
                     },
                     { id:'z2',name:'Region-5',
                       data : [{name:'July',y:31},
                               {name:'Aug',y:39},
                               {name:'Sept',y:19}]
                     }
                    ]
        }