Question

我想为＃34;你的分数和＃34;提供不同的颜色。我尝试了2个数据集：一个只包括得分，第二个包含其他数据集，但它没有用。

这甚至可能吗？

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 DEMO of this here。

请参阅documentation regarding available methods here。

Answer 2

我创建了一个图表js（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/）

我可以给第一个酒吧上色吗？Bart Char＆＃34;不同？

2 个答案: