2017-03-17 96 views
0

我一直在嘗試爲不同的區域啓用不同的顏色,但是我找不到對不同對象使用不同顏色的方法。使用Chart.js和PHP配置餅圖顏色使用Chart.js和PHP

正在從數據庫中獲取數據,然後對其進行處理並按如下方式對其進行處理。

我很感激你如何改變顏色爲不同的項目

//looping through the data 
for(var i in data) { 
    CarPrices.push(data[i].name); 
    score.push(data[i].price); 
} 

//Working with data fetched from database 
var chartdata = { 
    labels: player, 
    datasets : [ 
     { 
      //Trying to change background color for each element        
      label: 'Car Prices', 
      backgroundColor: [ 
        "#FF6384", 
        "#36A2EB", 
        "#FFCE56" 
      ], 
      //Trying to change background color for each element** 
      hoverBackgroundColor: [ 
        "#FF6384", 
        "#36A2EB", 
        "#FFCE56" 
      ], 

     } 
    ] 
}; 

回答

0

有可能使用backgroundColor數據集屬性來控制每個片的顏色餅圖/圓環圖中的觀點。

看起來你試圖在你的問題中這樣做,但這裏是一個完整的工作示例,以便您可以利用它來滿足您的需求。

var config = { 
    type: 'doughnut', 
    data: { 
    datasets: [{ 
     data: [300, 50, 100, 40, 10], 
     backgroundColor: [ 
     window.chartColors.red, 
     window.chartColors.orange, 
     window.chartColors.yellow, 
     window.chartColors.green, 
     window.chartColors.blue, 
     ], 
    }], 
    labels: [ 
     "Red", 
     "Orange", 
     "Yellow", 
     "Green", 
     "Blue" 
    ] 
    }, 
    options: { 
    responsive: true, 
    legend: { 
     display: true, 
     labels: { 
     padding: 20 
     }, 
    }, 
    tooltips: { 
     enabled: false, 
    } 
    } 
}; 

這是一個工作Codepen example