如何在 ChartJS 中的 Y 轴值末尾添加一个单位？答案

【问题标题】：How can I add a unit to the end of my Y Axis values in ChartJS?如何在 ChartJS 中的 Y 轴值末尾添加一个单位？
【发布时间】：2017-04-06 17:20:39
【问题描述】：

我想在 y 轴上的温度值末尾添加一个摄氏度单位。我对其他 SO 问题进行了一些研究，并尝试编写一个函数将单元附加到值的末尾，但它不起作用。

我尝试复制这个 JSFiddle 示例，但即使我使用的是最新版本的 ChartJs，也无法让它为我工作

http://jsfiddle.net/vy0yhd6m/80/

我正在运行 ChartJS 2.5.0，有人可以帮助我如何执行此操作吗？

var ctx = document.getElementById("myChart").getContext("2d");

    // Create gradient
    grd = ctx.createLinearGradient(170.000, 600.000, 150.000, 0.000);

    // Add colors
    grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
    grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
    grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
    grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
    grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
    grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');




    var data = {
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
        datasets: [
            {
                label: "My First dataset",
                lineTension: 0.1,
                backgroundColor: grd,
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [100, 250, 250, 400, 400, 400, 500, 700, 900, 1000, 1000, 1300, 1300, 1100, 900, 700, 500, 300, 100, 0],
                spanGaps: false,
            }
        ]
    };


    var myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    },
                    scaleLabel:
                        function(label){return  ' $' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");},
                    gridLines: {
                        display: false
                    },
                }],
                xAxes: [{
                    display: false,
                    gridLines: {
                        display: false
                    }
                }]
            },

        },
    });

HTML

<canvas id="myChart" width="400" height="400"></canvas>

【问题讨论】：

标签： javascript jquery html charts chart.js

【解决方案1】：

我能够解决这个问题，我需要像这样在我的 ticks 对象下添加一个回调

                    ticks: {
                        beginAtZero:true,
                        callback: function(value, index, values) {
                                return value + '°';
                        }
                    },

我希望这对遇到类似问题的人有所帮助。

【讨论】：

【解决方案2】：

我在 Angular 7 中试过这个，这对我有用：

options: {
  tooltips: {
    callbacks: {
       label: (tooltipItems, data) => {
            return data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + ' GB';
            }
        },
  }

【讨论】：

【解决方案3】：

    var data = {
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
    datasets: [
        {
            lineTension: 0.1,
                backgroundColor: grd,
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [100, 250, 250, 400, 400, 400, 500, 700, 900, 1000, 1000, 1300, 1300, 1100, 900, 700, 500, 300, 100, 0],
                spanGaps: false
        }
    ]
};

     var options = {
        animation: false,
        scaleLabel:
        function(label){return label.value.toString() +' °C';}
        
    };

    //Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    /*************************************************************************/
    var myLineChart = new Chart(ctx).Line(data, options);
    var grd = ctx.createLinearGradient(170.000, 600.000, 150.000, 0.000);
        grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
    grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
    grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
    grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
    grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
    grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

【讨论】：