条形图中每个条的颜色不同; ChartJS
我正在使用ChartJS在我正在进行的一个项目中，我需要一个条形图中的每个酒吧不同的颜色。
这是一个条形图数据集的例子：
var barChartData = { labels: ["001", "002", "003", "004", "005", "006", "007"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [20, 59, 80, 81, 56, 55, 40] }] }; 有什么办法来绘制每个酒吧不同？
解决scheme：调用update方法来设置新值：
var barChartData = { labels: ["January", "February", "March"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [20, 59, 80] } ] }; window.onload = function(){ var ctx = document.getElementById("mycanvas").getContext("2d"); window.myObjBar = new Chart(ctx).Bar(barChartData, { responsive : true }); //nuevos colores myObjBar.datasets[0].bars[0].fillColor = "green"; //bar 1 myObjBar.datasets[0].bars[1].fillColor = "orange"; //bar 2 myObjBar.datasets[0].bars[2].fillColor = "red"; //bar 3 myObjBar.update(); }
查看Chart.Bar.js文件后，我find了解决办法。 我用这个函数来生成一个随机颜色：
function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; }
我已经将它添加到文件的末尾，我在“fillColor：”下面调用了这个函数
helpers.each(dataset.data,function(dataPoint,index){ //Add a new point for each piece of data, passing any required data to draw.
所以现在看起来像这样：
helpers.each(dataset.data,function(dataPoint,index){ //Add a new point for each piece of data, passing any required data to draw. datasetObject.bars.push(new this.BarClass({ value : dataPoint, label : data.labels[index], datasetLabel: dataset.label, strokeColor : dataset.strokeColor, fillColor : getRandomColor(), highlightFill : dataset.highlightFill || dataset.fillColor, highlightStroke : dataset.highlightStroke || dataset.strokeColor })); },this);
它的作品，我得到不同的颜色，每个酒吧。
如果你看一下在Chart.js上build立的图书馆“ ChartNew ”，你可以通过像下面这样的数组传递值来做到这一点：
var data = { labels: ["Batman", "Iron Man", "Captain America", "Robin"], datasets: [ { label: "My First dataset", fillColor: ["rgba(220,220,220,0.5)", "navy", "red", "orange"], strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [2000, 1500, 1750, 50] } ] };
你可以调用这个函数为每个小节生成随机的颜色
var randomColorGenerator = function () { return '#' + (Math.random().toString(16) + '0000000').slice(2, 8); }; var barChartData = { labels: ["001", "002", "003", "004", "005", "006", "007"], datasets: [ { label: "My First dataset", fillColor: randomColorGenerator(), strokeColor: randomColorGenerator(), highlightFill: randomColorGenerator(), highlightStroke: randomColorGenerator(), data: [20, 59, 80, 81, 56, 55, 40] } ] };
从v2开始，您可以通过backgroundColor属性简单地指定一个值的数组来对应每个条的颜色：
datasets: [{ label: "My First dataset", data: [20, 59, 80, 81, 56, 55, 40], backgroundColor: ["red", "blue", "green", "blue", "red", "blue"], }],
这也是可能的borderColor ， hoverBackgroundColor ， hoverBorderColor 。
从条形图数据集属性的文档：
一些属性可以被指定为一个数组。 如果这些设置为数组值，则第一个值应用于第一个小节，第二个值应用于第二个小节，依此类推。
如果你不能使用NewChart.js，你只需要改变使用数组来设置颜色的方式。 在Chart.js中查找帮助器迭代：
replace这一行：
fillColor : dataset.fillColor,
对于这一个：
fillColor : dataset.fillColor[index],
由此产生的代码：
//Iterate through each of the datasets, and build this into a property of the chart helpers.each(data.datasets,function(dataset,datasetIndex){ var datasetObject = { label : dataset.label || null, fillColor : dataset.fillColor, strokeColor : dataset.strokeColor, bars : [] }; this.datasets.push(datasetObject); helpers.each(dataset.data,function(dataPoint,index){ //Add a new point for each piece of data, passing any required data to draw. datasetObject.bars.push(new this.BarClass({ value : dataPoint, label : data.labels[index], datasetLabel: dataset.label, strokeColor : dataset.strokeColor, //Replace this -> fillColor : dataset.fillColor, // Whith the following: fillColor : dataset.fillColor[index], highlightFill : dataset.highlightFill || dataset.fillColor, highlightStroke : dataset.highlightStroke || dataset.strokeColor })); },this); },this);
而在你的js中：
datasets: [ { label: "My First dataset", fillColor: ["rgba(205,64,64,0.5)", "rgba(220,220,220,0.5)", "rgba(24,178,235,0.5)", "rgba(220,220,220,0.5)"], strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [2000, 1500, 1750, 50] } ]
生成随机颜色;
function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; }
并为每个logging调用它;
function getRandomColorEachEmployee(count) { var data =[]; for (var i = 0; i < count; i++) { data.push(getRandomColor()); } return data; }
最后设定颜色;
var data = { labels: jsonData.employees,// your labels datasets: [ { data: jsonData.approvedRatios,// your data backgroundColor: getRandomColorEachEmployee(jsonData.employees.length) } ] };
尝试这个 ：
function getChartJs() { **var dynamicColors = function () { var r = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255); return "rgb(" + r + "," + g + "," + b + ")"; }** $.ajax({ type: "POST", url: "ADMIN_DEFAULT.aspx/GetChartByJenisKerusakan", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (r) { var labels = rd[0]; var series1 = rd[1]; var data = { labels: rd[0], datasets: [ { label: "My First dataset", data: series1, strokeColor: "#77a8a8", pointColor: "#eca1a6" } ] }; var ctx = $("#bar_chart").get(0).getContext('2d'); ctx.canvas.height = 300; ctx.canvas.width = 500; var lineChart = new Chart(ctx).Bar(data, { bezierCurve: false, title: { display: true, text: "ProductWise Sales Count" }, responsive: true, maintainAspectRatio: true }); $.each(rd, function (key, value) { **lineChart.datasets[0].bars[key].fillColor = dynamicColors(); lineChart.datasets[0].bars[key].fillColor = dynamicColors();** lineChart.update(); }); }, failure: function (r) { alert(rd); }, error: function (r) { alert(rd); } }); }
我刚刚得到这个问题，这是我的解决scheme
var labels = ["001", "002", "003", "004", "005", "006", "007"]; var data = [20, 59, 80, 81, 56, 55, 40]; for (var i = 0, len = labels.length; i < len; i++) { background_colors.push(getRandomColor());// I use @Benjamin method here } var barChartData = { labels: labels, datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", backgroundColor: background_colors, data: data }] };
您可以使用livegap图表轻松生成
从酒吧菜单中selectMulicolors
http://charts.livegap.com/Galleryhttp://img.dovov.comChart-14.png
**使用的图表库是chart.js库的chartnew.js修改版本
与chartnew.js代码将是这样的事情
var barChartData = { labels: ["001", "002", "003", "004", "005", "006", "007"], datasets: [ { label: "My First dataset", fillColor: ["rgba(0,10,220,0.5)","rgba(220,0,10,0.5)","rgba(220,0,0,0.5)","rgba(120,250,120,0.5)" ], strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [20, 59, 80, 81, 56, 55, 40] } ] };
;){kind=link}