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中的所有属性（数据，颜色和点），因为它们将覆盖默认值并为每个行或条提供不同的颜色。

我以前工作过。我把json写在.js里面，但我想从外部JSON文件中调用它。

我不是在寻找答案＆＃34;试试这个＆＃34;。我想了解我做错了什么以及为什么，所以我可以了解它为什么会这样做。

提前谢谢。

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

Flot不会上传JSON

1 个答案: