chart.js - 饼图不显示所有数据

时间:2017-05-20 07:35:57

标签: javascript jquery charts chart.js

我想创建一个以饼图形式显示某些值的图表。为此我拿了图表chart.js。但是有些不对劲

我遵循JS-Code:

$(function(){
  var ie = 12,
	firefox = 7,
	chrome = 15,
	safari = 13,
	opera = 4,
	chart = $('#chart')[0];
  
   var charObj = new Chart(chart, {
	data: {
	    datasets: [{
		data: [
		    firefox,
		    safari,
		    ie,
		    opera,
	            chrome
		],
		backgroundColor: [
			"#FF6384",
			"#4BC0C0",
			"#FFCE56",
			"#000",
			"#36A2EB"
		],
		label: 'Browser' // for legend
	}],
		labels: [
			"Firefox",
			"Safari",
			"Internet Explorer",
			"Opera",
			"Chrome"
		]
	},
	  type: 'polarArea'
	});
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<canvas id="chart" width="700px" height="700px"></canvas>

为什么我的Opera Value没有显示?点击Opera(在图例中)它会在图表中隐藏我的Firefox值吗?

1 个答案:

答案 0 :(得分:0)

看起来你的chart.js版本有一些错误。尝试使用最新版本。关于jsfiddle的示例。 chart.js的当前版本是2.5.0

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script