我可以用不同的颜色为 "Bart Char" 中的第一个栏着色吗？

Question

我想给 "Your score" 一个不同的颜色。我尝试做 2 个数据集：一个只包含分数，第二个包含其他数据集，但它没有用。

这可能吗？

Answer 1

我创建了一个图表 js (https://github.com/leighquince/Chart.js) 的分支，它有一个选项可以传递给条形图以覆盖条形，称为 overlayBars。您可以使用此功能并定义两个数据集，一个包含 "your score"，另一个包含所有其他数据集。

var overlayData = {
    labels: ["Your Score", "February", "March", "April", "May", "Jun", "July"],
    datasets: [{
        label: "My Firstdataset",
        fillColor: "rgba(121,187,205,0.5)",
        strokeColor: "rgba(121,187,205,0.8)",
        highlightFill: "rgba(121,187,205,0.75)",
        highlightStroke: "rgba(121,187,205,1)",
        data: [44, null, null, null, null, null, null]
    }, {
        label: "My Second dataset",
        fillColor: "rgba(131,137,235,0.5)",
        strokeColor: "rgba(131,137,235,0.8)",
        highlightFill: "rgba(131,137,235,0.75)",
        highlightStroke: "rgba(131,137,235,1)",
        data: [null, 23, 66, 33, 55, 44, 101]
    }]
};



var myBarChart = new Chart(document.getElementById("canvas").getContext("2d")).Bar(overlayData, {

    overlayBars: true,


});

<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>
<div style="width:30%">
    <div>
        <canvas id="canvas" height="250" width="400"></canvas>
    </div>
</div>

fiddle (http://fiddle.jshell.net/leighking2/x7d1u38L/)

Answer 2

您可以使用标准 chart.js 库并仅使用一个数据集来完成此操作。

只需使用 new Chart() 创建图表并将返回的对象传递给变量，然后更改您希望以不同方式显示的任何属性，并使用 update() 方法刷新图表。

像这样就可以了：

var myBarChart = new Chart(document.getElementById("barChart").getContext("2d")).Bar(ChartData, ChartOptions);

// Change 1st bar (bars[0]) to red (display).
myBarChart.datasets[0].bars[0].fillColor = "rgba(255,0,0,0.7)";
myBarChart.datasets[0].bars[0].strokeColor = "rgba(255,0,0,1)";
// Change 1rd bar to red (highlight setting on mouse over)
myBarChart.datasets[0].bars[0].highlightFill = "rgba(212,10,10,0.7)";
myBarChart.datasets[0].bars[0].highlightStroke = "rgba(212,10,10,1)";

myBarChart.update();

看到一个jsFiddle DEMO of this here。

参见documentation regarding available methods here。

我可以用不同的颜色为 "Bart Char" 中的第一个栏着色吗？

Can I color the first bar in "Bart Char" differently?

chart.js