javascript - Flot 无法上传 JSON

Question

我是 json 和 flot 的新手。但我被要求创建一个图表。有人可以向我解释为什么我的代码不起作用吗？

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

据我所知，到目前为止，jquery $.getJSON('chart.json', function(graphData) 应该检索 json 文件。而 $.plot($( '#graph-lines'), graphData,{}) 应该解析它。

这是我的 JSON 文件:

{       
    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'}
}

因此，我需要 JSON 中的所有属性(数据、颜色和点)，因为它们将覆盖默认值并为每条线或条赋予不同的颜色。

我之前就成功了。我在 .js 中编写了 json，但我想从外部 JSON 文件调用它。

我不是在寻找“试试这个”的答案。我想了解我做错了什么以及为什么，这样我就可以了解为什么它会这样工作。

提前谢谢您。

Answer 1

很简单，你的 json 文件无效应该是这样的

[
    {       
        "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"}
    }
]