Javascript 如何使用chart.js在饼图中显示切片内的切片值
我有一个场景,我需要在饼图中显示切片内的切片值。我的网页上有不止一个饼图。下面的代码是完美的工作,但只有第一个饼图和其他它的抛出错误如下,你能帮我整理一下吗 错误::未捕获类型错误:无法读取未定义的属性“data”Javascript 如何使用chart.js在饼图中显示切片内的切片值,javascript,chart.js,pie-chart,Javascript,Chart.js,Pie Chart,我有一个场景,我需要在饼图中显示切片内的切片值。我的网页上有不止一个饼图。下面的代码是完美的工作,但只有第一个饼图和其他它的抛出错误如下,你能帮我整理一下吗 错误::未捕获类型错误:无法读取未定义的属性“data” Code:: options:{ animation:{ onComplete:function(){ var ctx = this.chart.ctx; var dataset_obj = this.data.datasets; for
Code::
options:{
animation:{
onComplete:function(){
var ctx = this.chart.ctx;
var dataset_obj = this.data.datasets;
for (var i=0;i<dataset_obj.length; i++){
var meta_obj = dataset_obj[i]._meta[i].data;
for (var j=0; j<meta_obj.length; j++){
var model =meta_obj[j]._model;
start_angle= model.startAngle;
end_angle = model.endAngle;
mid_angle =start_angle + ( end_angle -start_angle)/2;
mid_radius = model.innerRadius + (model.outerRadius -model.innerRadius)/2;
var x =mid_radius*math.cos(mid_angle);
var y = mid_radius*math.cos(mid_angle);
ctx.fillstyle='#fff';
if (dataset_obj[i].data[j] != 0 && meta_obj[j].hidden != true){
ctx.fillText(dataset_obj[i].data[j], model.x+x, model.y+y);
}
}
}
}
}
}
code::
选项:{
动画:{
onComplete:function(){
var ctx=this.chart.ctx;
var dataset_obj=this.data.datasets;
对于(var i=0;i这回答了问题标题中包含的问题:
如何使用chart.js在饼图中显示切片内的切片值
下面的代码片段显示了如何使用在切片中显示值。示例代码是从chartjs插件标签中提取的
var canvas=document.getElementById('myChart');
新图表(画布{
键入“pie”,
数据:{
标签:[“一月”、“二月”、“三月”],
数据集:[{
数据:[504453365515900],
背景颜色:['#FF6384','#36A2EB','#FFCE56']
}]
},
选项:{
回答:是的,
维护Aspectratio:是的,
插件:{
标签:{
render:'值',
fontColor:[“绿色”、“白色”、“红色”]
}
}
}
});
这回答了问题标题中包含的问题:
如何使用chart.js在饼图中显示切片内的切片值
下面的代码片段显示了如何使用在切片中显示值。示例代码是从chartjs插件标签中提取的
var canvas=document.getElementById('myChart');
新图表(画布{
键入“pie”,
数据:{
标签:[“一月”、“二月”、“三月”],
数据集:[{
数据:[504453365515900],
背景颜色:['#FF6384','#36A2EB','#FFCE56']
}]
},
选项:{
回答:是的,
维护Aspectratio:是的,
插件:{
标签:{
render:'值',
fontColor:[“绿色”、“白色”、“红色”]
}
}
}
});
如何使用?如何使用?谢谢@uminder,它正在工作,但我发现另一个问题,因为这些值只在一次中填充,当我重新加载图表时,它将消失。现在,假设如果我关闭浏览器并再次打开或更改浏览器,它将再次显示值。但在执行多个操作后rce刷新cntrl+f5然后它也没有显示值。你能帮忙吗?@Amit Moghe:既然它起作用了,请接受这个答案,并为你现在观察到的另一个问题发布一个新问题。我为此创建了另一个问题,请帮帮忙-谢谢@uminder,它起作用了,但我正在观察另一个问题,因为这些值是只填充一次图表,当我重新加载图表时,它会消失。现在假设如果我关闭浏览器并再次打开或更改浏览器,它将再次显示值。但是在多次强制刷新cntrl+f5之后,它也不会显示值。您能帮帮忙吗?@Amit Moghe:既然它工作了,请接受这个ans回答并针对您现在观察到的另一个问题发布一个新问题。我已经为此创建了另一个问题,请帮助-