chart.js设置一个栏为不同的颜色？
因此，我有一段代码，它以我需要的格式愉快地显示了一个图形：
<script>var ChartTitleOps = {
showTooltips: true,
tooltipFillColor: "#e64c65",
tooltipFontFamily: "'Bree Serif', sans-serif",
tooltipFontColor: "#fff",
tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> votes)",
barValueSpacing : 2,
scaleLineWidth: 10,
scaleFontFamily: "'Bree Serif', sans-serif",responsive: false,animation: false,maintainAspectRatio: false,scaleIntegersOnly: true,scaleShowGridLines : false,scaleBeginAtZero : true,scaleFontSize: 17,scaleFontColor: "#FFFFFF",scaleOverride:true,scaleSteps:<?php echo $highestVoteCount ?>,scaleStepWidth:1,scaleStartValue:0,scaleGridLineColor : "#1f253d"}; var ChartTitleData = {labels : [<?php styleFinishedVoteAmounts($votesPlaced); ?>],datasets : [{
fillColor : "rgba(52,104,175,0.7)",
strokeColor : "rgba(52,104,175,1)",
data : [<?php styleFinishedVoteCount($VoteCounts); ?>]
}]};var wpChartChartTitleBar = new Chart(document.getElementById("ChartTitle").getContext("2d")).Bar(ChartTitleData,ChartTitleOps);
</script>
我想让图表中的一个条显示为不同于上面代码中设置的颜色。
共有2个答案
由于rtome的方法在较新版本的Chart.js中似乎不起作用，下面是一个当前版本（截至本文的2.9.3版本）的不同条形图颜色的工作示例。
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "horizontalBar",
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
],
borderColor: "rgb(255, 99, 132)",
data: [3, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body {
margin-top: 35px;
}
#container {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}<html>
<head>
<title>Bar colour example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
<div id="container">
<canvas id="myChart"></canvas>
</div>
</body>
</html>
创建图表后，可以更改条形图元素的颜色。
在new Chart（）语句之后，您可以访问和修改图表元素属性，并按如下方式更新图表：
var wpChartChartTitleBar = new Chart(document.getElementById("myChart").getContext("2d")).Bar(ChartTitleData, ChartTitleOps);
// Change 2nd bar to red (display).
wpChartChartTitleBar.datasets[0].bars[1].fillColor = "rgba(229,12,12,0.7)";
wpChartChartTitleBar.datasets[0].bars[1].strokeColor = "rgba(229,12,12,1)";
// Change 2nd bar to red (highlight setting on mouse over)
wpChartChartTitleBar.datasets[0].bars[1].highlightFill = "rgba(0,229,0,0.7)";
wpChartChartTitleBar.datasets[0].bars[1].highlightStroke = "rgba(0,229,0,1)";
wpChartChartTitleBar.update();
在这里看到一把小提琴。
-
我已经研究了如何更改Angulal-Chart.js的颜色，但它涉及整个（数据集）的颜色，而不是特定的条。 我要寻找的是一种在条形图中为每个条形应用不同颜色的方法；从图表到角度。 所以，我有一个条形图： 使用以下角度代码（当然是在控制器中） 其中将返回随机颜色。 现在，字段将此颜色应用于所有条： 当我真的想为每个酒吧不同的颜色： 柱塞
-
我花了太长时间研究如何在Matplotlib中使两个子图共享同一y轴，并在两个子图之间共享一个颜色条。 所发生的事情是，当我在或中调用函数时，它会自动缩放绘图，这样colorbar加上绘图就可以放在“subplot”边界框中，导致两个并排绘图的大小非常不同。 为了解决这个问题，我试图创建第三个子情节，然后我黑客攻击它，使其不呈现仅有颜色条的情节。唯一的问题是，现在两个地块的高度和宽度都不均匀，我想
-
我在我的供应链模型中有两种类型的边缘：demand_links和supply_links。所有链接的默认颜色是灰色。但是我想在每次更改demand_link的属性时将demand_links的颜色更改为红色（注意：边缘是通过边缘创建者自定义边缘代理）。如何做到这一点？ 下面是我的简单测试代码，但它不起作用。 初始化时我收到错误。
-
当数据不断传来时，整个堆栈向左移动时，条形图是动态添加的，有没有办法将第一个条形图的颜色设置为不同的颜色？谢谢。 编辑和解决方案：这是我在图表中添加新条目的代码，它每500毫左右动态发生一次。 感谢@Philip Jahoda，我让它正常工作，只需在您的addEntry方法中添加这段代码：
-
问题内容： 我有一个动画，其中数据范围变化很大。我想有一个跟踪数据的最大值和最小值（即我希望它不固定）。问题是如何做到这一点。 理想情况下，我希望该轴独立。 我尝试了以下四件事 1.天真的方法 问题：每帧都有一个新的彩条 2.添加到图像 将上面的for循环更改为 问题：这引起了 3.在自己的轴上绘制 问题：尚未更新。 2.和4.的组合 问题：常数。 问题答案： 虽然我不确定如何使用来具体实现，
-
假设我有三个数据集： 我可以分散绘制这个： 10套怎么做得到？ 我搜索了这个，可以找到任何关于我所问问题的参考资料。 编辑：澄清（希望）我的问题 如果我多次调用散点，我只能在每个散点上设置相同的颜色。此外，我知道我可以手动设置颜色阵列，但我相信有更好的方法来做到这一点。我的问题是，“我如何自动分散绘制我的几个数据集，每个数据集都有不同的颜色。 如果有帮助，我可以很容易地为每个数据集分配一个唯一的数