Question

我使用图表JS

var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
    labels : ["3/14","3/15","3/16","3/17","3/18","3/19","3/20","3/21","3/22","3/23"],
    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, 59]
        }
    ]
}

var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d")).Line(lineChartData);

我有两个问题

如何使最后一栏成为另一种颜色
如何将最后一个标签设为图像

Answer 1

您可以使用https://github.com/FVANCOP/ChartNew.js/处提供的ChartNew.Js图书馆。该库添加了为颜色选项添加对象数组的功能。它确实添加了一些更改标签的选项，但我不认为可以将图像用于实际图表的标签。您可以修改弹出该标签的工具提示，例如：How to add image to chart.js tooltip?，但我无法肯定地说。以下是我在最近的应用中使用的一些代码，用于根据数据的百分比值为每个条形码着色：

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

Answer 2

点1：

要绘制不同颜色的最后一个条形，您可以将数据集划分为不同的数据数组，如下所示：第一个数据数组：将最后一个值替换为空...对于第二个数据数组，所有值都是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）技巧将图像放在最后一个标签上...... < / p>

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

希望这个帮助

修改图表js

2 个答案: