如何对chart.js饼图的每个弧段的borderColor进行更多控制

Kai 发表于 Dev

凯

我对饼图有以下要求

有一定数量的“可见”段（例如 4 个带有黑色边框颜色的段）
有更多没有白色边框颜色的段（例如 40），以便我可以灵活地设置它们的背景颜色（当单击这些段之一时，我想为从 0° 开始的所有段设置背景颜色到点击的部分。）

我想我有两个选择来解决这个要求

我可以渲染两个相同大小的图表（背景中的图表带有可见边框的部分较少，而前景中带有不可见边框的图表）
或者，如果可以更好地控制弧线的边框颜色 - 那么我可以将某些线段的外部部分设为黑色，左侧部分设为白色，右侧部分设为黑色。请参阅图像，例如具有不同颜色的弧线

以下屏幕截图显示了我使用两个数据集实现的结果 - 内部数据集有 2 个片段，外部数据集有 4 个片段，没有边框颜色。如果这两个数据集可以重叠显示，我现在会很高兴:)

我发现了类似的问题：

如何在 Chart.js 上自定义边框样式- 我想这也可以用于自定义弧形渲染，但我不知道该怎么做
Chartjs 饼图外边框- 基本上是我需要的，但不幸的是没有解决方案

凯

在如何将两个相同大小的画布叠在一起的帮助下，我设法将两个图表叠在一起？:)

HTML：

<div class="wrapper">
    <canvas id="canvas1" width="400" height="300"></canvas>
    <canvas id="canvas2" width="400" height="300"></canvas>
</div>

CSS：

.wrapper {
    position: relative;
    width: 400px;
    height: 300px;
}

.wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
}

Javascript：

dataInner = {
    datasets: [{
        data: [10, 10, 10, 10,10, 10],        
            borderWidth:0,
        backgroundColor: ['blue', 'white', 'white', 'white', 'white', 'white']
    }] 
};

optionsOuter = {
    events: ['click'],          
  // change the background color of the "inner chart" depending on the clicked segment
  onClick: function(evt){
    var activePoints = myInnerPieChart.getElementsAtEvent(evt);
    // check if the was possible to determine the active point, if not return
    if (typeof activePoints === 'undefined' || activePoints.length <1) return;
    var selectedIndex = activePoints[0]._index;
    
    // change the background color of all arcs till the selected index    
    var tmp_data = [];
    for (var i = 0; i < myInnerPieChart.data.datasets[0].backgroundColor.length; i++) {
      if (i <= selectedIndex){
        tmp_data.push('blue');                                              
      }
      else{
        tmp_data.push('white'); // same color as "bar_fill" css class
      }
    }   
    
    myInnerPieChart.data.datasets[0].backgroundColor = tmp_data;
    myInnerPieChart.update();
  } 

}

dataOuter = {
    datasets: [{
        data: [10, 10],        
            borderWidth:1,
        borderColor: ['black', 'black']
    }] 
};


var myInnerPieChart = new Chart($('#canvas1'), {
    type: 'pie',
    data: dataInner
});

var myOuterPieChart = new Chart($('#canvas2'), {
    type: 'pie',
    data: dataOuter,
    options: optionsOuter
});

看起来像这样，我认为这应该有助于实现我的要求：https : //jsfiddle.net/xuce274p/3/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。