Javascript 如何对chart.js饼图的每个弧段的边框颜色进行更多控制

我对饼图有以下要求

• 具有一定数量的“可见”线段（例如，4个黑色边框的线段）
• 有更多没有白色边框颜色的线段（例如40个），这样我可以灵活地设置它们的背景颜色（当单击其中一个线段时，我想为所有线段设置背景颜色，从0°开始，直到单击的线段。）

我想我有两个选择来解决这个问题

• 我可以呈现两个彼此上方大小相同的图表（背景中的图表具有较少的可见边框段，前景中的图表具有不可见边框）
• 或者，如果有可能对圆弧的边界颜色有更多的控制，那么我可以将部分线段的外部部分设置为黑色，左侧部分设置为白色，右侧部分设置为黑色。有关具有不同颜色的圆弧的示例，请参见图

下面的屏幕截图显示了我使用两个数据集实现的功能-内部数据集有2个数据段，外部数据集有4个数据段，没有边框颜色。如果这两个数据集可以相互叠加显示，我会很高兴：）

我发现了类似的问题：

• -我想这也可以用于自定义圆弧渲染，但我不知道如何进行
• -基本上是我需要的，但不幸的是没有解决方案

---

我在以下人员的帮助下，成功地将两张图表放在了一起：）

HTML:

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
});

dataInner={
数据集：[{
数据：[10,10,10,10,10,10,10]，
边框宽度：0，
背景颜色：[“蓝”、“白”、“白”、“白”、“白”、“白”、“白”]
}] 
};
选项外部={
事件：[“单击”]，
//根据单击的部分更改“内部图表”的背景色
onClick：函数（evt）{
var activePoints=myInnerPieChart.getElementsAtEvent（evt）；
//检查是否可以确定激活点，如果不能返回
if（typeof activePoints===“未定义”| | activePoints.length
.wrapper {
    position: relative;
    width: 400px;
    height: 300px;
}

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

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
});