简体   繁体   中英

Highcharts multiple data points between xAxis

I'm using Highcharts and am trying to get multiple points between any point on the xAxis. (Eg, I'd like 4 points between October and November.) How can I do this?

I've tried adding [] on y: to specify multiple values, but that didn't work. I just can't seem to get anything to work, and there aren't any examples of this on highcharts website that I can find.

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
            }
        });
    });
});

You need to specify the x axis values

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

You also need to drop the xaxis categories, and make the xa is type 'datetime' An example is here http://www.highcharts.com/demo/spline-irregular-time

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM