chart.js如何将一个柱子设置为不同的颜色？

Question

chart.js如何将一个柱子设置为不同的颜色？

5

我有一段代码，它可以愉快地以我需要的格式显示图表：

<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>

我希望在图表中，有一条柱状线的颜色与之前代码中设置的颜色不同。

- Gary Stewart

可能是条形图中每个条的不同颜色; ChartJS的重复问题。 - thanksd

2个回答

4

由于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>

- David Metcalfe

谢谢！我一直在寻找一种方法，当标签满足某些条件时，可以给它一个不同的颜色。但是当我看到这个片段并意识到“backgroundColor”可以是一个数组时，我知道这个解决方案也会起作用！ - Cees

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rtome · Accepted Answer

创建图表后，您可以更改条形元素的颜色。

在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();

可以在这里查看关于它的范例。