Highstock-从JSON文件中提取数据

Question

I understand there are many similar questions related to this topic on SO however, I was unsuccessful at implementing what I am trying to do so I am writing a question here. Please understand that I am very new.

So, basically, using the Highstock - the basic graph which can be found here http://www.highcharts.com/stock/demo/basic-line , I want to import the data from an JSON file named Json1.json. How would I do this? http://jsfiddle.net/x0g8hL0e/1/

In the JavaScript, I have written

$(function () {

    $.getJSON('Json1.json', function (data) {
        // Create the chart
        $('#container').highcharts('StockChart', {


            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'Pressure'
            },

        });
    });

});

Also, is it possible to just see the 24 hour format instead of a year-long?

PS, Json data is formatted in this way

[
{"Pressure": 1},
{"Pressure": 5},
{"Pressure": 3},
{"Pressure": 2},
{"Pressure": 4}
}]

Answer 1

You should process your data, so it will be in a format that is accepted by Highcharts. It can be (as described in API reference ):

1. An array of numerical values.
2. An array of arrays with 2 values.
3. An array of objects with named values.

Other option is to use an array with keys defined.

If you want to use eg 1st data fromat, then you could go through your JSON and create an array of numerical values with values taken out of each object, from Pressure property.

$(function () {

    //$.getJSON('Json1.json', function (data) {
    // simulate JSON data
    var data = [{
        "Pressure": 1
    }, {
        "Pressure": 5
    }, {
        "Pressure": 3
    }, {
        "Pressure": 2
    }, {
        "Pressure": 4
    }],
        processedData = [];
    // process the data to match one of formats required by Highcharts - an array of numberical values
    // see: http://api.highcharts.com/highstock#series<line>.data
    Highcharts.each(data, function(d) {
        processedData.push(d.Pressure);
    });
    // Create the chart
    $('#container').highcharts('StockChart', {
        rangeSelector: {
            selected: 1
        },
        title: {
            text: 'Pressure'
        },

        series: [{
            data: processedData
        }]

    });
    //});

});

JSFiddle

For basic information about Highcharts you could see General Documentation