在xAxis之间高亮显示多个数据点

时间:2013-03-21 01:27:11

标签: javascript highcharts

我正在使用Highcharts并且我试图在xAxis上的任何点之间获得多个点。 (例如,我想在10月到11月之间获得4分。)我该怎么做?

我尝试在y上添加[]来指定多个值,但这不起作用。我似乎无法得到任何工作,而且我在高科技网站上找不到任何这样的例子。

http://jsfiddle.net/wUDBW/1/

$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'area'
            },
            title: {
                text: "Title"
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: ["October", "November", "December", "January", "February", "March"],
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            },
            yAxis: {
                title: {
                    text: 'Counts'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                }
            },
            tooltip: {
                formatter: function () {
                    return '<strong>Count:</strong> ' + this.y + '<br><strong>Date:</strong> ' + this.point.date;
                }
            },
            plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                }
            },
            series: [{
                name: 'Views',
                data: [{
                    y: 3,
                    date: 'October 9th, 2012',
                    unlocked: 1,
                    potential: 1,
                }, {
                    y: 5,
                    date: 'October 12th, 2012',
                    unlocked: 1,
                    potential: 2,
                }, {
                    y: 7,
                    date: 'October 14th, 2012',
                    unlocked: 1,
                    potential: 3,
                }, {
                    y: 7,
                    date: 'October 18th, 2012',
                    unlocked: 1,
                    potential: 3,
                }, {
                    y: 7,
                    date: 'October 22nd, 2012',
                    unlocked: 1,
                    potential: 3,
                }, {
                    y: 7,
                    date: 'October 23rd, 2012',
                    unlocked: 1,
                    potential: 3,
                }, ]
            }, {
                name: 'Replies',
                data: [{
                    y: 3,
                    date: 'October 9th, 2012',
                    unlocked: 1,
                    potential: 1,
                }, {
                    y: 5,
                    date: 'October 12th, 2012',
                    unlocked: 1,
                    potential: 2,
                }, {
                    y: 7,
                    date: 'October 14th, 2012',
                    unlocked: 1,
                    potential: 3,
                }, {
                    y: 7,
                    date: 'October 18th, 2012',
                    unlocked: 1,
                    potential: 3,
                }, {
                    y: 7,
                    date: 'October 22nd, 2012',
                    unlocked: 1,
                    potential: 3,
                }, {
                    y: 7,
                    date: 'October 23rd, 2012',
                    unlocked: 1,
                    potential: 3,
                }, ]
            }],
            exporting: {
                enabled: false
            }
        });
    });
});

1 个答案:

答案 0 :(得分:1)

您需要指定x轴值

data: [{
                y: 3,
                x: Date.UTC(2012, 9, 9)
                date: 'October 9th, 2012',
                unlocked: 1,
                potential: 1,
            }, {

您还需要删除xaxis类别,并使xa类型为“datetime”  这里有一个例子http://www.highcharts.com/demo/spline-irregular-time