在圖表JS中的半甜甜圈圖中的起點和終點之間畫一條線

Question

我使用圖表js繪制了一個半甜甜圈圖。 但是我想在圖表的底部畫一條直線（綠色）

我怎么畫這條線？

Answer 1

這不是戰爭電影的材料。 這不是錯誤的紀錄片材料。 但它應該給您帶來一兩個刺激。

這是一個如下工作的插件。 它沿着甜甜圈的第一個切片的開始側繪制“綠色細線”，直至中心，然后沿着甜甜圈的最后一個切片的末端側延伸。 這樣做是為了能夠使用想要的任何甜甜圈周長，例如圓的5/8：

已經使用了一些（8像素）填充，以便“綠色細線”將有一定的空間將切片（4像素）擴展到切片之外。 一個工作的小提琴在這里。 該代碼（已注釋）也可以在下面找到。

 var theThinGreenLinePlugin = { afterDatasetsDraw: function(chartInstance, easing) { // The context, needed for drawing. var ctx = chartInstance.chart.ctx; // The first (and, assuming, only) dataset. var dataset = chartInstance.data.datasets[0]; // The dataset's data length. var datasetDataLength = dataset.data.length; // The model of the first slice. var firstDatumModel = dataset._meta[Object.keys(dataset._meta)[0]].data[0]._model; // The model of the last slice. var lastDatumModel = dataset._meta[Object.keys(dataset._meta)[0]].data[datasetDataLength - 1]._model; // The Thin Green Line's radius (measured from the center of the doughnut). // Add a few pixels to make the line extend a bit from the slice's outer radius. var lineRadius = firstDatumModel.outerRadius + 4; // The first point of The Thin Green Line (for the first slice). var firstSliceStartX = firstDatumModel.x + lineRadius * Math.cos(firstDatumModel.startAngle); var firstSliceStartY = firstDatumModel.y + lineRadius * Math.sin(firstDatumModel.startAngle); // The last point of The Thin Green Line (for the last slice). var lastSliceEndX = lastDatumModel.x + lineRadius * Math.cos(lastDatumModel.endAngle); var lastSliceEndY = lastDatumModel.y + lineRadius * Math.sin(lastDatumModel.endAngle); // Save the context, in order to mess with it. We will restore it later. ctx.save(); // Green ctx.strokeStyle = '#3db24b'; // Thin ctx.lineWidth = 4.0; ctx.beginPath(); ctx.moveTo(firstSliceStartX, firstSliceStartY); // Go through the center, so that other doughnuts (eg 3/4 doughnuts) will make sense. ctx.lineTo(firstDatumModel.x, firstDatumModel.y); ctx.lineTo(lastSliceEndX, lastSliceEndY); ctx.stroke(); // Restore the context. ctx.restore(); } }; Chart.pluginService.register(theThinGreenLinePlugin); var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { circumference: 1.0 * Math.PI, rotation: 1.0 * Math.PI, layout: { padding: 8 } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <canvas id="myChart" width="400" height="400"></canvas>