如何使用chartjs设置条形图中每个条形的颜色？
我希望这个图中的条形图有我自己选择的不同颜色。我不想使用随机的颜色为酒吧（或一组酒吧）。
var ctx = $("#myBarChart").get(0).getContext("2d");
var data = {
labels: ["a","b","c","d","e","f","g"],
datasets: [
{
label: "My First dataset",
/*fillColor: "rgba(84,255,159,1)",
highlightFill: "rgba(84,255,159,0.75)",*/
data: [5,3, 4, 2, 1, 3, 1]
},
]};
var myBarChart = new Chart(ctx).Bar(data);
var width = $('canvas').parent().width();
$('canvas').attr("width",width);
new Chart(ctx).Bar(data);
共有3个答案
在ChartJS 2.4.0中，您可以为数据集[idx]. data数组中的每个元素分配不同的颜色
即。
....
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: ["#5e4fa2", "#745998", "#8a638d", "#a06d83", "#b57678", "#cb806e", "#e18a63"]
参考链接：http://www.chartjs.org/docs/latest/charts/bar.html
试试这个
var myBarChart = new Chart(ctx).Bar(dataset, options);
var dataset = {
labels: ["a", "b", "c", "d", "e", "f", "g"], // Optional Labels
datasets: [ // array of data
{
label: "Bar - Set 1",
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: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "Bar - Set 2",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
//ect..
};
您可以使用索引器（如数组）访问数据集及其单条：
myBarChart.datasets[0].bars[0].fillColor = "#2ECC71";
myBarChart.datasets[0].bars[0].highlightFill = "#58D68D";
myBarChart.datasets[0].bars[1].fillColor = "#3498DB";
myBarChart.datasets[0].bars[1].highlightFill = "#5DADE2";
-
我正在尝试使用ChartJS创建一个条形图，如下所示： 我想知道如何分别为每个条添加渐变颜色，并根据它们的高度添加渐变颜色。 我在这里找到了一个非常接近的解决方案，但它为整个图形设置了，而不是单个条。 另外，如果我为每个条创建渐变，这个解决方案更接近，但是，我想根据条的高度设置渐变。 有没有办法指定根据酒吧高度，而不是坐标上的
-
我在一个项目中使用ChartJS，我需要为条形图中的每个条形图使用不同的颜色。 下面是条形图数据集的示例： 有没有什么方法可以把每个酒吧涂成不同的颜色？
-
我试图理解他们条形图上的ChartJS文档。这对我来说没有意义，因为顶部的标签在一次意义上看起来似乎只适用于第一个栏（基于颜色），在另一种意义上，它适用于整个图表（它是唯一一个不在工具提示中的标签，它位于前面和中间） 我一直在努力使它更像他们的折线图，它显示了一个带有标签的图例和一个与图表上每条线相关的彩色正方形。（他们没有多行图表的示例，但它确实是这样工作的）。 我希望在顶部有一个图例，表示浅绿
-
在一个html页面中，我有一个选择菜单（a， b， c， d）和一个条形图（a， b， c， d）。我想做的是在选择菜单中选择的条形图中突出显示相应的条形图。
-
过去几周我一直在使用ChartJS，我已经习惯了，但是，我试图在我的条形图中添加单独的标签，但我无法解决这个问题。 下面是我正在使用的代码。 如果我将单词标签更改为标签，它们根本不会显示，但当它说标签时，它们都会一起显示。我想要的是数组元素1出现在栏1上，等等。
-
我需要一种在ChartJS中显示堆叠条形图中多个数据段的方法。在官方文档中，标签属于堆栈的每个部分，但我需要这些部分是独立的。 我已经模拟了我需要实现的输出类型。我们每天有三个堆叠的条，每个条显示一个单独的数据集。在每个数据集中，我们有一个段，它实际上是该条的子集。 不幸的是，中的属性似乎不接受数组。这个图表可以使用ChartJS吗？