绘制形状，插入数据

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>

Answer 2

如果有其他人遇到这个问题，我最终找到并使用了Method Draw，这完全不是一个完美的解决方案，而且我多次丢失了我的工作。但是，动态绘制和生成SVG的能力非常有用。