javascript - 绘制形状，插入数据

Question

从事一个元素，并已将其作为设计的一部分提供。如您所见，这是一个相当简单的形状，但是要求您看到的数据(数字)应显示其相应的值，该值将决定图表中切片的颜色。

我已经尝试了很多不同的事情，我确信一定有比我正在做的事情更容易的事情。

• 使用 CanvasJS 手动绘制图像
• 使用 CSS 重新创建图像并旋转每个元素
• 使用 ChartJS/Google Charts 并尝试自定义

这两种方法都令人沮丧且耗时。除了在 Flash 中执行此操作之外，是否有任何建议或我完全错过的可以尝试的事情？

Answer 1

通过将一个圆环图放置在另一个圆环图之上，您可以实现这一点。

var chart1 = new CanvasJS.Chart("chartContainer1",
{	
	legend: {
		verticalAlign: "center",
		horizontalAlign: "left"
	},
	data: [
	{
		type: "doughnut",
		showInLegend: true,
		indexLabel: "{y}",
		indexLabelPlacement: "inside",
		dataPoints: [
			{ y: 71 },
			{ y: 55 },
			{ y: 50 },
			{ y: 65 },
			{ y: 95 },
			{ y: 68 },
			{ y: 28 },
			{ y: 34 },
			{ y: 14 }
		]
	},
  
	]
});
var chart2 = new CanvasJS.Chart("chartContainer2",
{        
	backgroundColor: "transparent",
	title: {
		text: "Your Score is 10",
		verticalAlign: "center",
		horizontalAlign: "center",
		dockInsidePlotArea: true,
		maxWidth: 60
	},
	data: [
	{
		type: "doughnut",
		indexLabel: "{y}",
		indexLabelPlacement: "inside",
		dataPoints: [
			{ y: 71 },
			{ y: 55 },
			{ y: 50 },
			{ y: 65 },
			{ y: 95 },
			{ y: 68 },
			{ y: 28 },
			{ y: 34 },
			{ y: 14 }
		]
	}
 	]
});

chart1.render();
chart2.render();

#parent {
  position: relative;
}

#chartContainer1, #chartContainer2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
#chartContainer1 {
  width:800px;
  height:250px;
}
#chartContainer2 {
  transform: translate(-28%, 24%);
  width:200px; 
  height:170px;
}

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="parent">
  <div id="chartContainer1"></div>
  <div id="chartContainer2"></div>
</div>