Flot wont upload JSON | 易学教程

问题

I'm new to json and flot. But I ve been asked to create a chart. Could someone explain to me why my code will not work?

$.getJSON('chart.json', function(graphData){
    alert(graphData);

    $.plot($('#graph-lines'), graphData, {
        series: {
            points: {
                show: true,
                radius: 15,

            },
            lines: {
                show: true,
                lineWidth: 6

            },
            shadowSize: 0
        },
        grid: {
            color: '#646464',
            borderColor: 'transparent',
            borderWidth: 20,
            hoverable: true,
            highlightColor: "transparent"
        },
        xaxis: {
            tickColor: 'transparent',
            ticks: [[6,'Week 48'],[7,'Week 49'],[8,'Week 50'],[9,'Week 51'],[10,'Week 52']]
        },
        yaxis: {
            min: 0,
            max: 1000,
            tickSize: 500
        }
    });

    // Bars
    $.plot($('#graph-bars'), graphData, {
        series: {
            bars: {
                show: true,
                barWidth: .9,
                align: 'center'
            },
            shadowSize: 0
        },
        grid: {
            color: '#646464',
            borderColor: 'transparent',
            borderWidth: 20,
            hoverable: true
        },
        xaxis: {
            tickColor: 'transparent',
            tickDecimals: 2


    },
            yaxis: {
                tickSize: 1000
            }
        });
});

From what I ve learned so far is that jquery $.getJSON('chart.json', function(graphData) should retrieve the json file. and $.plot($('#graph-lines'), graphData,{}) should parse it.

This is my JSON file:

{       
    data: [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
    color: '#F02626',
    points: {  fillColor: '#F02626', radius: 6 },
    lines: { fillColor: '#CCF8FF'}
}, {
    data: [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
    color: '#26F041',
    points: { radius: 10, fillColor: '#26F041' }
}, {
    data: [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
    color: '#20AEFA',
    points: { radius: 6, fillColor: '#20AEFA'}
}

So, I need all the properties in JSON (data, color and point) as they will override the default and give each line or bar a different color.

I got it working before. I had the json written inside .js but I want to call it from an external JSON file.

Im not looking for an answer "Try this". I would like to understand what I'm doing wrong and why, so I can learn why it works the way it does.

Thank you in advance.

回答1:

it's simple your json file is not valid it should be like this

[
    {       
        "data": [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
        "color": "#F02626",
        "points": {  "fillColor": "#F02626", "radius": 6 },
        "lines": { "fillColor": "#CCF8FF"}
    }, 
    {
        "data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
        "color": "#26F041",
        "points": { "radius": 10, "fillColor": "#26F041" }
    }, 
    {
        "data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
        "color": "#20AEFA",
        "points": { "radius": 6, "fillColor": "#20AEFA"}
    }
]

来源：https://stackoverflow.com/questions/32796270/flot-wont-upload-json

标签

javascript

jquery

json

flot

getjson