Chart.js甜甜圈图表不正常工作 [英] Chart.js Doughnut chart not properly work
本文介绍了Chart.js甜甜圈图表不正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用chart.js甜甜圈图表。我的JSON数据是从数据库中获取的。
但是在价值图表的填充时间将不会显示。
function playerPrel2Res（qID）{
var tmp = #playerVoteId + QID;
var lab = $（tmp）.text（）;
$ .ajax（{
type：POST，
url：contextPath +'/common/playerPredCounter.action'，// contextPath for dynamic
dataType：'json' ，
data：{predictionID：qID}，
success：function（data）{
var id = new Array（）;
var name = new Array（）;
for（var i = 0; i< data.properties.length; i ++）{
id [i] = data.properties [i] .id;
name [i ] = data.properties [i] .name;
}
alert（hi ...）;
var doughnutData = [
{
value：id [0]，
color：＃F7464A，
highlight：＃FF5A5E，
label：name [0]
}，
{
值：id [1]，
颜色：＃46BFBD，
突出显示：＃5AD3D1，
label：name [1]
}，
{
value：id [2]，
color：＃FDB45C，
highlight：＃FFC870，，
label：name [2]
}，
];
window.onload = function（）{
var ctx = document.getElementById（'playerChartArea'）。getContext（2d）;
alert（ctx +path）;
window.myDoughnut =新图（ctx）.Doughnut（doughnutData，{responsive：true}）;
};
}
}）;
}
这不会显示任何输出，但我会像这样写静态然后显示图表
var doughnutData = [
{
value：id [0] .val（），
color：＃F7464A，
highlight：＃FF5A5E，
label：name [0] .val（）
}，
{
value ：50，
颜色：＃46BFBD，
亮点：＃5AD3D1，
标签：绿色
}，
{
值：100，
颜色：＃FDB45C，
亮点：＃FFC870，
标签：黄色
}，
{
值：40，
颜色：＃949FB1，
亮点：＃A8B3C5，
实验室el：灰色
}，
{
值：120，
颜色：＃4D5360，
亮点：＃616774，
标签：深灰色
}
];
window.onload = function（）{
var ctx = document.getElementById（'playerChartArea'）。getContext（2d）;
alert（ctx +path）;
window.myDoughnut =新图（ctx）.Doughnut（doughnutData，{responsive：true}）;
};
有一件事是我的警报不显示为 ctx
请帮助我。
解决方案
m粘贴我的代码
var doughnutData =;
$ .ajax（{
type：POST，
url：contextPath +'/ common / action'，// contextPath for dynamic
dataType：'json'，
data：{predictionID：oID}，
success：function（data）{
var id = new Array（）;
var name = new Array（）;
for（var i = 0; i< data.properties.length; i ++）{
id [i] = data.properties [i] .id;
name [i] = data.properties [i] .name;
}
doughnutData = [
{
value：id [0]，
color：＃F7464A ，
突出显示：＃FF5A5E，
标签：名称[0]
}，
{
值：id [1]，
颜色：＃46BFBD，
突出显示：＃5AD3D1，
标签：名称[1]
}，
{
value：id [2]，
color：＃FDB45C，
highlight：＃FFC870，
label：name [2]
}，
{
value：id [3]，
color：＃949FB1，
highlight：＃A8B3C5，
label：name [3]
$，
{
value：id [4]，
color：＃4D5360，
highlight：＃616774，
label：name [ 4]
}
];
var ctx = document.getElementById（canvas）。getContext（2d）;
window.myDoughnut =新图（ctx）.Doughnut（doughnutData，{responsive：true}）;
}
}）;
所以只需声明doughnutData变量global并移除 windows.load 函数并保持内部代码。就是这样I am trying to use chart.js Doughnut chart. my JSON data is properl fetch from data base.
But at the fill time of value chart will not display. If i am pasting example code static then its showing proper data.
function playerPrel2Res(qID){
var tmp="#playerVoteId"+qID;
var lab=$(tmp).text();
$.ajax({
type : "POST",
url : contextPath + '/common/playerPredCounter.action', //contextPath for dynamic
dataType : 'json',
data : {predictionID:qID},
success : function(data) {
var id=new Array();
var name=new Array();
for ( var i = 0; i < data.properties.length; i++) {
id[i]= data.properties[i].id;
name[i]= data.properties[i].name;
}
alert("hi...");
var doughnutData = [
{
value: id[0],
color:"#F7464A",
highlight: "#FF5A5E",
label: name[0]
},
{
value: id[1],
color: "#46BFBD",
highlight: "#5AD3D1",
label: name[1]
},
{
value: id[2],
color: "#FDB45C",
highlight: "#FFC870",
label: name[2]
},
];
window.onload = function(){
var ctx = document.getElementById('playerChartArea').getContext("2d");
alert(ctx +"path");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
};
}
});
}
this will not display any out put but i write like this static then show chart
var doughnutData = [
{
value: id[0].val(),
color:"#F7464A",
highlight: "#FF5A5E",
label: name[0].val()
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function(){
var ctx = document.getElementById('playerChartArea').getContext("2d");
alert(ctx +"path");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
};
and one thing is that my alert is not display for ctx
Please help me out.
解决方案
i have done by using this just do this, i'm pasting my code
var doughnutData="";
$.ajax({
type : "POST",
url : contextPath + '/common/action', //contextPath for dynamic
dataType : 'json',
data : {predictionID:oID},
success : function(data) {
var id=new Array();
var name=new Array();
for ( var i = 0; i < data.properties.length; i++) {
id[i]= data.properties[i].id;
name[i]= data.properties[i].name;
}
doughnutData = [
{
value: id[0],
color:"#F7464A",
highlight: "#FF5A5E",
label: name[0]
},
{
value: id[1],
color: "#46BFBD",
highlight: "#5AD3D1",
label: name[1]
},
{
value: id[2],
color: "#FDB45C",
highlight: "#FFC870",
label: name[2]
},
{
value: id[3],
color: "#949FB1",
highlight: "#A8B3C5",
label: name[3]
},
{
value: id[4],
color: "#4D5360",
highlight: "#616774",
label: name[4]
}
];
var ctx = document.getElementById("canvas").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
}
});
so just declare doughnutData variable global and remove windows.load function and just remain internal code. that's it
这篇关于Chart.js甜甜圈图表不正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
