javascript - 在图表JS中的半甜甜圈图中的起点和终点之间画一条线

我使用图表js绘制了一个半甜甜圈图。但是我想在图表的底部画一条直线（绿色）



我怎么画这条线？

最佳答案

这不是战争电影的材料。这不是错误的纪录片材料。但它应该给您带来一两个刺激。

这是一个如下工作的插件。它沿着甜甜圈的第一个切片的起始侧绘制“细绿线”，直至中心，然后沿着甜甜圈的最后一个切片的终止侧延伸。这样做是为了能够使用人们希望的任何甜甜圈周长，例如圆的5/8：



已经使用了一些（8像素）填充，以便“细绿线”将有一定的空间将切片（4像素）延伸到切片之外。 A working fiddle is here.代码（已注释）也可以在下面找到。

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 (e.g. 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>

关于javascript - 在图表JS中的半甜甜圈图中的起点和终点之间画一条线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41461638/