不错不会上传JSON
Flot wont upload JSON
我是 json 的新手,而且很忙。但我被要求创建一个图表。有人可以向我解释为什么我的代码不起作用吗?
$.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 文件中调用它。
我不是在寻找答案"Try this"。我想了解我做错了什么以及为什么,这样我就可以了解它为什么会这样工作。
提前致谢。
很简单,您的 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 的新手,而且很忙。但我被要求创建一个图表。有人可以向我解释为什么我的代码不起作用吗?
$.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 文件中调用它。
我不是在寻找答案"Try this"。我想了解我做错了什么以及为什么,这样我就可以了解它为什么会这样工作。
提前致谢。
很简单,您的 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"}
}
]