jquery高图表绘图问题 [英] jquery high charts plotting problem
本文介绍了jquery高图表绘图问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请找到上面的附件....
这里我的问题是默认显示一个系列数据，但在我的传奇中我显示四个如何从json得到...这是我的问题....如果我从左侧单击另一个复选框它显示第二个系列数据很好，但传说显示四个...我想要两个传说我怎么能实现这个...请给我建议..
这里我的代码是这样的...
和每个服务器按钮点击一个图表再重新加载我怎样才能避免这种情况
function chart（）{
$ .ajax（{
type： POST，
url： PeriodicData.asmx / BindDatatableNormal，
数据： {}，
contentType： application / json; charset = utf-8，
dataType： json，
成功： function （data1）{
var options = {
chart：{
renderTo：' Container'，
defaultSeriesType：' line'
}，
title：{
text：' '，
style：{
fontSize：' 12px'，
fontFamily：' Verdana，sans-serif'
}
}，
// 工具提示：{
// pointFormat：' {series.name}： {point.data1}％'，
//
// }，
plotOptions ：{
列：{
allowPointSelect： true ，
cursor：' 指针'，
dataLabels：{
enabled： false
}，
}
}，
图例：{
布局：' 垂直'，
float ： true ，
align：' right'，
enabled： true
}，
xAxis：{
type：' 小时'，
min： 1 ，
title：{
text：' 小时
}，
类别：[]，
标签：{
align：' right'，
style：{
fontSize： ' 10px'，
fontFamily：' Verdana，sans-serif'
}
}
}，
yAxis：{
// min：0，
title：{
text：' Consum ption（升）'
}
}，
学分：{
启用： false
}，
系列：[{
类型：' line'，
name： s1，
数据：[]
}，
{
name： s2，
data：[]
}，
{
name： s3，
data：[]
}，
{
name： s4，
data ：[]
}]
};
var chart = new Highcharts.Chart（options）;
var item = chart.series [ 0 ];
var item1 = chart.series [ 1 ];
var item2 = chart.series [ 2 ];
var item3 = chart.series [ 3 ];
for （ var i = 0 ; i< data1.d.length; i ++）{
if （data1.d [i] .s4）
{
options.series [ 0 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s1）]）
options.series [ 1 ]。data.push（[（data1。 d [i] .Hour）， parseInt （data1.d [i] .s2）]）
options.series [ 2 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s3 ）]）
options.series [ 3 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s4）]）
item.options.showInLegend = true ;
chart.legend.renderItem（item）;
chart.legend.renderItem（item1）;
chart.legend.renderItem（item2）;
chart.legend.renderItem（item3）;
chart.legend.render（）;
}
else if （data1.d [i] .s3）
{
options.series [ 0 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s1）]）
options.series [ 1 ]。data.push （[（data1.d [i] .Hour）， parseInt （data1.d [i] .s2）]）
options.series [ 2 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s3）]）
item.options.showInLegend = true ;
chart.legend.renderItem（item）;
chart.legend.renderItem（item1）;
chart.legend.renderItem（item2）;
chart.legend.render（）;
}
else if （data1.d [i] .s2）
{
options.series [ 0 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s1）]）
options.series [ 1 ]。data.push （[（data1.d [i] .Hour）， parseInt （data1.d [i] .s2）]）
item.options.showInLegend = true ;
item1.options.showInLegend = true ;
chart.legend.renderItem（item）;
chart.legend.renderItem（item1）;
chart.legend.render（）;
}
else if （data1.d [i] .s1）
{
options.series [ 0 ]。data.push（[（data1.d [i] .Hour），< span class =code-sdkkeyword> parseInt （data1.d [i] .s1）]）
}
}
var chart = new Highcharts.Chart（options）;
}，
错误： function （结果）{
alert（ 错误）;
}
}）;
}
解决方案
.ajax（{
type： POST，
url： PeriodicData.asmx / BindDatatableNormal，
data： {} ，
contentType： application / json; charset = utf-8，
dataType： json，
成功： function （data1）{
var options = {
chart：{
renderTo： ' Container'，
defaultSeriesType：' line'
}，
title：{
text：' '，
style：{
fontSize：' 12px'，
fontFamily：' < span class =code-string> Verdana，sans-serif'
}
}，
// 工具提示：{
// pointFormat：' {series.name}： {point.data1}％'，
//
// }，
plotOptions：{
column：{
allowPointSelect： true ，
cursor：' 指针，
dataLabels：{
已启用： false
}，
}
}，
图例：{
布局：' vertical'，
float ： true ，
align：' right'，
enabled： true
}，
xAxis：{
类型：' 小时'，
min： 1 ，
title：{
text：' 小时'
}，
类别：[]，
标签：{
align：' right'，
style：{
fontSize：< span class =code-string>' 10px'，
fontFamily：' Verdana，sans-serif'
}
}
}，
yAxis：{
// min：0，
title：{
text：' 消耗量（升）'
}
}，
点数：{
已启用： false
}，
系列：[{
类型：' line'，
name： s1，
data：[]
}，
{
name： s2，
数据：[]
}，
{
名称： s3，
data：[]
}，
{
name： s4，
data：[]
}]
};
var chart = new Highcharts.Chart（options）;
var item = chart.series [ 0 ];
var item1 = chart.series [ 1 ];
var item2 = chart.series [ 2 ];
var item3 = chart.series [ 3 ];
for （ var i = 0 ; i< data1.d.length; i ++）{
if （data1.d [i] .s4）
{
options.series [ 0 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s1）]）
options.series [ 1 ]。data.push（[（data1。 d [i] .Hour）， parseInt （data1.d [i] .s2）]）
options.series [ 2 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s3 ）]）
options.series [ 3 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s4）]）
item.options.showInLegend = true ;
chart.legend.renderItem（item）;
chart.legend.renderItem（item1）;
chart.legend.renderItem（item2）;
chart.legend.renderItem（item3）;
chart.legend.render（）;
}
else if （data1.d [i] .s3）
{
options.series [ 0 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s1）]）
options.series [ 1 ]。data.push （[（data1.d [i] .Hour）， parseInt （data1.d [i] .s2）]）
options.series [ 2 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s3）]）
item.options.showInLegend = true ;
chart.legend.renderItem（item）;
chart.legend.renderItem（item1）;
chart.legend.renderItem（item2）;
chart.legend.render（）;
}
else if （data1.d [i] .s2）
{
options.series [ 0 ]。data.push（[（data1.d [i] .Hour）， parseInt （data1.d [i] .s1）]）
options.series [ 1 ]。data.push （[（data1.d [i] .Hour）， parseInt （data1.d [i] .s2）]）
item.options.showInLegend = true ;
item1.options.showInLegend = true ;
chart.legend.renderItem（item）;
chart.legend.renderItem（item1）;
chart.legend.render（）;
}
else if （data1.d [i] .s1）
{
options.series [ 0 ]。data.push（[（data1.d [i] .Hour），< span class =code-sdkkeyword> parseInt （data1.d [i] .s1）]）
}
}
var chart = new Highcharts.Chart（options）;
}，
错误： function （结果）{
alert（ 错误）;
}
}）;
}
hii am using high charts its working fine....
please find above attachement....
here my problem am showing one series data by default but in my legend am showing four how can i get from json... this is my problem.... if i click another check box from left side it showing second series data fine but legend is showing four.. i want two legends how can i achieve this.. please give me suggestion..
here my code is like this...
and one more for every server button click chart is reloading how can i avoid that
function chart() {
$.ajax({
type: "POST",
url: "PeriodicData.asmx/BindDatatableNormal",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data1) {
var options = {
chart: {
renderTo: 'Container',
defaultSeriesType: 'line'
},
title: {
text: '',
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
}
},
// tooltip: {
// pointFormat: '{series.name}: {point.data1}%',
//
// },
plotOptions: {
column: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
}
},
legend: {
layout: 'vertical',
float: true,
align: 'right',
enabled: true
},
xAxis: {
type: 'Hour',
min: 1,
title: {
text: 'Hours'
},
category: [],
labels: {
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
//min: 0,
title: {
text: 'Consumption (Liters)'
}
},
credits: {
enabled: false
},
series: [{
type: 'line',
name: "s1",
data: []
},
{
name: "s2",
data: []
},
{
name: "s3",
data: []
},
{
name: "s4",
data: []
}]
};
var chart = new Highcharts.Chart(options);
var item = chart.series[0];
var item1 = chart.series[1];
var item2 = chart.series[2];
var item3 = chart.series[3];
for (var i = 0; i < data1.d.length; i++) {
if(data1.d[i].s4)
{
options.series[0].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s1)])
options.series[1].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s2)])
options.series[2].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s3)])
options.series[3].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s4)])
item.options.showInLegend = true;
chart.legend.renderItem(item);
chart.legend.renderItem(item1);
chart.legend.renderItem(item2);
chart.legend.renderItem(item3);
chart.legend.render();
}
else if(data1.d[i].s3)
{
options.series[0].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s1)])
options.series[1].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s2)])
options.series[2].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s3)])
item.options.showInLegend = true;
chart.legend.renderItem(item);
chart.legend.renderItem(item1);
chart.legend.renderItem(item2);
chart.legend.render();
}
else if(data1.d[i].s2)
{
options.series[0].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s1)])
options.series[1].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s2)])
item.options.showInLegend = true;
item1.options.showInLegend = true;
chart.legend.renderItem(item);
chart.legend.renderItem(item1);
chart.legend.render();
}
else if(data1.d[i].s1)
{
options.series[0].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s1)])
}
}
var chart = new Highcharts.Chart(options);
},
error: function (result) {
alert("Error");
}
});
} 解决方案
.ajax({ type: "POST", url: "PeriodicData.asmx/BindDatatableNormal", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data1) { var options = { chart: { renderTo: 'Container', defaultSeriesType: 'line' }, title: { text: '', style: { fontSize: '12px', fontFamily: 'Verdana, sans-serif' } }, // tooltip: { // pointFormat: '{series.name}: {point.data1}%', // // }, plotOptions: { column: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, } }, legend: { layout: 'vertical', float: true, align: 'right', enabled: true }, xAxis: { type: 'Hour', min: 1, title: { text: 'Hours' }, category: [], labels: { align: 'right', style: { fontSize: '10px', fontFamily: 'Verdana, sans-serif' } } }, yAxis: { //min: 0, title: { text: 'Consumption (Liters)' } }, credits: { enabled: false }, series: [{ type: 'line', name: "s1", data: [] }, { name: "s2", data: [] }, { name: "s3", data: [] }, { name: "s4", data: [] }] }; var chart = new Highcharts.Chart(options); var item = chart.series[0]; var item1 = chart.series[1]; var item2 = chart.series[2]; var item3 = chart.series[3]; for (var i = 0; i < data1.d.length; i++) { if(data1.d[i].s4) { options.series[0].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s1)]) options.series[1].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s2)]) options.series[2].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s3)]) options.series[3].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s4)]) item.options.showInLegend = true; chart.legend.renderItem(item); chart.legend.renderItem(item1); chart.legend.renderItem(item2); chart.legend.renderItem(item3); chart.legend.render(); } else if(data1.d[i].s3) { options.series[0].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s1)]) options.series[1].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s2)]) options.series[2].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s3)]) item.options.showInLegend = true; chart.legend.renderItem(item); chart.legend.renderItem(item1); chart.legend.renderItem(item2); chart.legend.render(); } else if(data1.d[i].s2) { options.series[0].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s1)]) options.series[1].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s2)]) item.options.showInLegend = true; item1.options.showInLegend = true; chart.legend.renderItem(item); chart.legend.renderItem(item1); chart.legend.render(); } else if(data1.d[i].s1) { options.series[0].data.push([(data1.d[i].Hour), parseInt(data1.d[i].s1)]) } } var chart = new Highcharts.Chart(options); }, error: function (result) { alert("Error"); } }); }
这篇关于jquery高图表绘图问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
