Chart.js set Цвет пончика-цвет?

Question

Я использую Chart.js (documentation), но я не могу установить цвет фона на пончик путь. Это даже не упоминается в документах.

То, что я пытаюсь достичь:

Текущий код:

var meterInvoicesData = [ 
    { 
     value: 75, 
     color: '#22d319' 
    }, 
    { 
     value: 25,  // rest 
     color: 'transparent' // invisible (setting this as background color will animate it too) 
    } 
]; 

var meterOptions = 
{ 
    percentageInnerCutout : 80, 
    animationEasing : 'easeInQuint' 
}; 

var meterInvoices = new Chart(document.getElementById('meterInvoices').getContext('2d')).Doughnut(meterInvoicesData,meterOptions); 

---

UPDATE: В настоящее время я решил его с помощью дублируют пончик (2-й холст) со значением 100, без анимации и желаемого (фонового) цвета, и позиционировал его абсолютным, под первым.

Однако это неприятный трюк и очень неэффективен, поэтому я все еще надеюсь на правильный ответ.

Answer 1

Я решил это, используя дубликат Donut (2-й холст) со значением 100, без анимации и желаемого фонового цвета, и позиционировал его абсолютным, под 1-м.

Однако это неприятный трюк и очень неэффективен, поэтому я все еще надеюсь на правильный ответ.

Answer 2

Возможно, нет никакого способа, как вы можете сделать это в элементе canvas. Я бы поставил абсолютный элемент за пределы холста. вот пример:

.fakeCircle { 
    position: absolute; 
    z-index: 0; 
    border-radius: 90px; 
    -webkit-border-radius: 90px; 
    -moz-border-radius: 90px; 
    background-color: #dadce8; 
    width: 50px; 
    height: 50px; 
    top: 12px; 
    left: 12px; 
} 
.fakeCircle:after { 
    position: absolute; 
    z-index: 0; 
    border-radius: 50px; 
    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    background-color: #fff; 
    width: 34px; 
    height: 34px; 
    content: ""; 
} 

Answer 3

Мысль, что я отправлю недавнее решение, которое работало для меня, используя V2.1.0, который представил plugins.

Chart без значения, отображение фона против диаграммы со значением покрытия фона, только основной график будет анимировать, фон только простая дуга:

---

Я первый зарегистрирован плагин за their docs:

var radiusBackground = function() { 
    var self = this; 

    self.draw = function(chartInstance) { 
    if(chartInstance.options.radiusBackground) { 
     var x = chartInstance.chart.canvas.clientWidth/2, 
      y = chartInstance.chart.canvas.clientHeight/2, 
      ctx = chartInstance.chart.ctx; 

     ctx.beginPath(); 
     ctx.arc(x, y, chartInstance.outerRadius - (chartInstance.radiusLength/2), 0, 2 * Math.PI); 
     ctx.lineWidth = chartInstance.radiusLength; 
     ctx.strokeStyle = chartInstance.options.radiusBackground.color || '#d1d1d1'; 
     ctx.stroke(); 
    } 
    }; 

    // see http://www.chartjs.org/docs/#advanced-usage-creating-plugins for plugin interface 
    return { 
    beforeDatasetsDraw: self.draw, 
    onResize: self.draw 
    } 
}; 

// Register with Chart JS 
Chart.plugins.register(new radiusBackground()); 

Th Синтаксис синтаксиса состоял в том, чтобы просто уменьшить дублирование и использовать один и тот же метод draw для нескольких событий плагина.

---

Затем я использовал свой новый зарегистрированный плагин следующим образом:

var chartElement = document.getElementById('doughnut-chart'); 

var chart = new Chart(chartElement, { 
    type: 'doughnut', 
    options: { 
    // Here is where we enable the 'radiusBackground' 
    radiusBackground: { 
     color: '#d1d1d1' // Set your color per instance if you like 
    }, 
    cutoutPercentage: 90, 
    title: { 
     display: false, 
    }, 
    legend: { 
     display: false, 
    }, 
    }, 
    data: { 
    labels: ["Type 1", "Type 2", "Type 3"], 
    datasets: [{ 
     data: [2, 5, 1], 
     backgroundColor: ["#a3c7c9","#889d9e","#647678"], 
     borderWidth: 0, 
     hoverBackgroundColor: ["#96b7b9","#718283","#5c6b6d"] 
    }] 
    } 
}); 

JS Fiddle Here