修改图表js

您可以在https://github.com/FVANCOP/ChartNew.js/。此库添加了为颜色选项添加对象数组的功能。它确实添加了一些更改标签的选项，但我认为不可能将图像用于实际图表的标签。你可以修改该标签弹出的工具提示，比如：如何将图像添加到chart.js工具提示中？，但我不能肯定。以下是我在最近的一个应用程序中使用的一些代码，根据数据的百分比值对每个条进行颜色编码：

//Set all canvas options and fill with data
self.chartJs = function () {
    //create an array for each column to be set into the chart properties -- also create arrays for the colors of the columns
    var arrayOfJobData = self.chartData();
    var descArray = [];
    var effArray = [];
    var colorArray = [];
    for (i = 0; i < arrayOfJobData.length; i++) {
        //console.log(arrayOfJobData[i].Cost_Code_Description);
        descArray.push(arrayOfJobData[i].Cost_Code_Description);
        //console.log(arrayOfJobData[i].Efficency);
        effArray.push(arrayOfJobData[i].Efficency);
        //Create an array of colors to match with the corresponding efficency % to show a + - relationship in the color scheme
        if (arrayOfJobData[i].Efficency < 100) {
            colorArray.push("red");
        }
        else if (arrayOfJobData[i].Efficency >= 100) {
            colorArray.push("green");
        }
    }
    //chart data is set and colors selected
    var barChartData = {
        labels: descArray, //array labels holding the desc for each cost code
        datasets: [
            {
                type: "Bar",
                //label: "Efficency %",
                fillColor: colorArray,
                strokeColor: "black",
                pointColor: "rgba(220,220,220,1)",
                pointstrokeColor: "white",
                drawMathLine: "mean", //using the math functions add-in draw a line with the average %
                mathLineStrokeColor: "orange",
                data: effArray //array of efficency percent values
            }]
    }

你基本上可以使用一种方法来构建你自己的颜色阵列，这种方法有点像另一个人提到的，如果你也想的话，只设置最后一种颜色。重要的是，您应该使用ChartNew.js轻松地执行您想要的操作。

这里有一些更符合你想要的颜色：

var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
    labels : ["3/20","3/21","3/22","3/23"],
    datasets : [
        {
            fillColor: ["chartGood ","chartGood ","chartGood ","red"],
            strokeColor : "rgba(255,255,255,1)",
            pointColor : "rgba(50,182,93,1)",
            pointStrokeColor : "#fff",
            data : [ 52, 50, 49, 59]
        }
    ]
}

ChartNew.js也有相当好的文档：https://github.com/FVANCOP/ChartNew.js/wiki/100.Available_options

对于点1:

要用不同的颜色绘制最后一个条形图，可以将数据集划分为不同的数据数组，如下所示：第一个数据数组：用null替换最后一个值。。。对于第二个数据数组，除最后一个值外，所有值都为null！！

"datasets": [{
            fillColor : chartGood,
            strokeColor : "rgba(255,255,255,1)",
            pointColor : "rgba(50,182,93,1)",
            pointStrokeColor : "#fff",
            data : [12, 21, 28, 29, 31, 55, 52, 50, 49, null]
        },
        {
            fillColor : chartGood,
            strokeColor : "rgba(255,0,0,1)",
            pointColor : "rgba(50,182,93,1)",
            pointStrokeColor : "#fff",
            data : [null, null, null, null, null, null, null, null, null, 59]
        }],

第二点：

如果你希望最后一个标签是一个图像：这在Chart.js中是不可能的…但是你可以使用一些（html，css）技巧将你的图像放在最后一个标记上。。。

• 例如，您可以在标签下方绘制一个表格，列数=标签集的长度（在您的情况下=10）
• 您设置为style=visibility：为每列隐藏。。只有最后一个（可见）
• 您放置了一个负边距上限值（将图像放置在标签上）

希望这能帮助