數據應顯示什么格式的高位圖表？

Question

我有這種格式的json：

[
    {
        "2007": [
            {
                "date": "2014-1-11",
                "val": "4"
            },
            {
                "date": "2014-1-11",
                "val": "5"
            }
        ],
        "2008": {
            "date": "2014-1-11",
            "val": "6"
        }
    }
]

嘗試使用highcharts顯示數據，其中每年（json節點）為系列名稱，year節點的子節點為line char，y軸為val，x軸為date：

小提琴： http : //jsfiddle.net/ot24zrkt/38/

jsonString應該采用哪種格式才能正確顯示？

代碼：

html : 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width:500px;height:400px;margin:1.5em 1em;"></div>

<script>
var d          = new Date();
var pointStart = d.getTime();
Highcharts.setOptions({
    global: {
        useUTC:false
    },
    colors: [
        'rgba( 0,   154, 253, 0.9 )', //bright blue
        'rgba( 253, 99,  0,   0.9 )', //bright orange
        'rgba( 40,  40,  56,  0.9 )', //dark
        'rgba( 253, 0,   154, 0.9 )', //bright pink
        'rgba( 154, 253, 0,   0.9 )', //bright green
        'rgba( 145, 44,  138, 0.9 )', //mid purple
        'rgba( 45,  47,  238, 0.9 )', //mid blue
        'rgba( 177, 69,  0,   0.9 )', //dark orange
        'rgba( 140, 140, 156, 0.9 )', //mid
        'rgba( 238, 46,  47,  0.9 )', //mid red
        'rgba( 44,  145, 51,  0.9 )', //mid green
        'rgba( 103, 16,  192, 0.9 )'  //dark purple
    ],
    chart: {
        alignTicks:false,
        type:'',
        margin:[60,25,100,90],
        //borderRadius:10,
        //borderWidth:1,
        //borderColor:'rgba(156,156,156,.25)',
        //backgroundColor:'rgba(204,204,204,.25)',
        //plotBackgroundColor:'rgba(255,255,255,1)',
        style: {
            fontFamily: 'Abel,serif'
        }
    },
    title: {
        text:'Test Chart Title',
        align:'left',
        margin:10,
        x: 50,
        style: {
            fontWeight:'bold',
            color:'rgba(0,0,0,.9)'
        }
    },
    subtitle: {
        text:'Test Chart Subtitle',   
        align:'left',
        x: 52,
    },
    legend: { enabled: true },
    plotOptions: {
        area: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        arearange: {
            lineWidth:1
        },
        areaspline: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        areasplinerange: {
            lineWidth:1
        },
        boxplot: {
            groupPadding:0.05,
            pointPadding:0.05,
            fillColor:'rgba(255,255,255,.75)'
        },
        bubble: {
            minSize:'0.25%',
            maxSize:'17%'
        },
        column: {
            //stacking:'normal',
            groupPadding:0.05,
            pointPadding:0.05
        },
        columnrange: {
            groupPadding:0.05,
            pointPadding:0.05
        },
        errorbar: {
            groupPadding:0.05,
            pointPadding:0.05,
            showInLegend:true        
        },
        line: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        scatter: {
            marker: {
                symbol: 'circle',
                radius:5
            }
        },
        spline: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        series: {
            shadow: false,
            borderWidth:0,
            states: {
                hover: {
                    lineWidthPlus:0,
                }
            }
        }
    },
    xAxis: {
        title: {
            text: 'X Axis Title',
            rotation:0,
            textAlign:'center',
            style:{ 
                color:'rgba(0,0,0,.9)'
            }
        },
        labels: { 
            style: {
                color: 'rgba(0,0,0,.9)',
                fontSize:'9px'
            }
        },
        lineWidth:.5,
        lineColor:'rgba(0,0,0,.5)',
        tickWidth:.5,
        tickLength:3,
        tickColor:'rgba(0,0,0,.75)'
    },
    yAxis: {
        minPadding:0,
        maxPadding:0,
        gridLineColor:'rgba(204,204,204,.25)',
        gridLineWidth:0.5,
        title: { 
            text: 'Y Axis<br/>Title',
            rotation:0,
            textAlign:'right',
            style:{ 
                color:'rgba(0,0,0,.9)',
            }
        },
        labels: { 
            style: {
                color: 'rgba(0,0,0,.9)',
                fontSize:'9px'
            }
        },
        lineWidth:.5,
        lineColor:'rgba(0,0,0,.5)',
        tickWidth:.5,
        tickLength:3,
        tickColor:'rgba(0,0,0,.75)'
    }
}); 

function randomData(points, positive, multiplier) {
    points     = !points            ? 1     : points;
    positive   = positive !== true  ? false : true;
    multiplier = !multiplier        ? 1     : multiplier;

    function rnd() {
        return ((
            Math.random() + 
            Math.random() + 
            Math.random() + 
            Math.random() + 
            Math.random() + 
            Math.random()
        ) - 3) / 3;
    }
    var rData = [];
    for (var i = 0; i < points; i++) {
        val = rnd();
        val = positive   === true ? Math.abs(val)      : val;
        val = multiplier >   1    ? (val * multiplier) : val;
        rData.push(val);    
    }
    return rData;
}
</script>

CSS :

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);

body {
    font-family:Abel, Calibri, Helvetica, sans-serif;
    font-size:95%;
}

javascript : 

var chart;
var pointStart = Date.UTC(2014,0,1);

var jsonString = '[{"2007": [{"date": "2014-1-11","val": "4"},{"date": "2014-1-11","val": "5"}],"2008": {"date": "2014-1-11","val": "6"}}]';

var myData = JSON.parse(jsonString);

$(function() {

    $('#container').highcharts({
        chart       : { type    : 'line' },
        title       : { },
        subtitle    : { },
        legend      : { enabled : true },
        tooltip     : { },
        plotOptions : {
            series  : {
                pointStart      : pointStart,
                pointInterval   : 86400 * 30 * 1000
            }
        },
        xAxis      : { 
            type           : 'datetime',
            tickInterval   : 86400 * 30 * 1000,
            labels         : {
                rotation : 0
            }
        },
        yAxis      : {  }
    }); 
    chart = $('#container').highcharts();

    chart.addSeries({ 
        data: myData        
    });



})

Answer 1

您的JSON應該包含帶有x / y參數的對象（點）數組，而不是自定義。 日期應為時間戳（時間以毫秒為單位），但為數值。

[{"x": 1389398400000,"y": 4},{"x": 1389398400000,"y": 5},{"x": 1389398400000,"y": 6}]

示例： http ： //jsfiddle.net/ot24zrkt/55/