Flot不会上传JSON [英] Flot wont upload JSON

问题描述

我是json和flot的新手.但是我被要求创建一个图表.有人可以向我解释为什么我的代码无法正常工作吗?

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

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

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.

这是我的JSON文件:

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

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

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.

我以前可以正常工作.我将json写在.js内，但我想从外部JSON文件中调用它.

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.

谢谢.

推荐答案

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

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

这篇关于Flot不会上传JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！