我能把"Bart Char“中的第一条涂上不同的颜色吗？

Question

查看示例

我想给“你的分数”一个不同的颜色。我尝试做了两个数据集:一个只包括分数，第二个和其他数据集，但它没有工作。

这有可能吗？

Answer 1

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

只需使用新图表()创建图表，并将返回的对象传递给变量，然后更改希望以不同方式显示的任何属性，并使用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演示。

见关于这里可用方法的文档。

Answer 2

我创建了一个图表分叉(https://github.com/leighquince/Chart.js)，它有一个选项可以传递给条形图来覆盖这些条形图，称为overlayBars。您可以使用这个特性并定义两个数据集，一个用“您的分数”，另一个用其他数据集。

​

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>

​

小提琴(http://fiddle.jshell.net/leighking2/x7d1u38L/)