绘制形状，插入数据

Question

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

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

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

这两种方法都令人沮丧且耗时。除了在 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 的能力非常有用。

绘制形状，插入数据

Drawing a shape, inserting data

html

javascript

css

frontend