プロジェクトで作業し、これをデザインの一部として提供しました。あなたが見ることができるように、それはかなりまっすぐ前の形ですが、表示されるデータ（数字）は対応する値を表示する必要があり、この値はチャートのスライスの色を駆動します。データを挿入して形状を描画する
私はいくつかのことを試してきました。私がやっていることよりも簡単なことがあります。手動CanvasJS
どちらの方法がイライラすると時間がかかるていたカスタマイズしようとする各要素
誰がこの質問に遭遇した場合、私はすべての完璧なソリューションではないと私は回数を私の仕事を失った見つけ、Method Drawを使用して終了。しかし、その場でSVGを描画して生成する機能は非常に便利でした。
別のドーナツグラフの上に1つのドーナツグラフを配置することにより、あなたはこれを達成することができます。
var chart1 = new CanvasJS.Chart("chartContainer1",
{ \t
\t legend: {
\t \t verticalAlign: "center",
\t \t horizontalAlign: "left"
\t },
\t data: [
\t {
\t \t type: "doughnut",
\t \t showInLegend: true,
\t \t indexLabel: "{y}",
\t \t indexLabelPlacement: "inside",
\t \t dataPoints: [
\t \t \t { y: 71 },
\t \t \t { y: 55 },
\t \t \t { y: 50 },
\t \t \t { y: 65 },
\t \t \t { y: 95 },
\t \t \t { y: 68 },
\t \t \t { y: 28 },
\t \t \t { y: 34 },
\t \t \t { y: 14 }
\t \t ]
\t },
\t ]
});
var chart2 = new CanvasJS.Chart("chartContainer2",
{
\t backgroundColor: "transparent",
\t title: {
\t \t text: "Your Score is 10",
\t \t verticalAlign: "center",
\t \t horizontalAlign: "center",
\t \t dockInsidePlotArea: true,
\t \t maxWidth: 60
\t },
\t data: [
\t {
\t \t type: "doughnut",
\t \t indexLabel: "{y}",
\t \t indexLabelPlacement: "inside",
\t \t dataPoints: [
\t \t \t { y: 71 },
\t \t \t { y: 55 },
\t \t \t { y: 50 },
\t \t \t { y: 65 },
\t \t \t { y: 95 },
\t \t \t { y: 68 },
\t \t \t { y: 28 },
\t \t \t { y: 34 },
\t \t \t { y: 14 }
\t \t ]
\t }
\t ]
});
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>これまで私は上記のようなことを試みましたが、私は既存のライブラリをカスタマイズしようと努力していました。しかし、ありがとう。 – hylian
私にはSVGの仕事のように見えますが、この答えの各セグメント*セクションの*異なる背景があなたにいくつかのアイデアを与えるでしょう - http://stackoverflow.com/questions/27943053/how-to-create-a -circle-with-links-on-border-side/34902989＃34902989 – Harry