Chart.js Y 轴标签，反向工具提示顺序，缩短 X 轴标签答案

【问题标题】：Chart.js Y axis label, reverse tooltip order, shorten X axis labelsChart.js Y 轴标签，反向工具提示顺序，缩短 X 轴标签
【发布时间】：2017-04-18 14:19:55
【问题描述】：

我正在使用 Chart.js 创建一个堆积条形图。但是，我在文档中找不到如何更改某些内容。

如何在 Y 轴上添加标签。
如何缩短 X 轴上的标签使其仅显示前 10 个字母。
如何反转值的显示顺序工具提示。

这些东西可以实现吗？

我已经标记了我要更改的内容here.

这是我的图表选项现在的样子：

        var ctx = $("#newchart");

        var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata,
            options: {
                barValueSpacing: 20,
                tooltips: {
                    enable: true,
                    mode: 'label',
                    callbacks: {
                        label: function(tooltipItem, data){
                            var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                            return datasetLabel + ': ' + Number(tooltipItem.yLabel) + ' Users';
                        }
                    }
                },
                responsive: true,
                segmentShowStroke: true,
                scales: {
                    xAxes: [{
                        display: false,
                        stacked: true,
                        ticks:{
                            stepSize : 10,
                        },
                        gridLines: {
                            lineWidth: 0,
                            color: "#9E9E9E"
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                        ticks: {
                            min: 0,
                            stepSize: 10,
                        },
                        gridLines: {
                            lineWidth: 0,
                            color: "#9E9E9E"
                        }
                    }]
                }
            }
        });

【问题讨论】：

标签： javascript jquery chart.js chart.js2

【解决方案1】：

1. Adding a Y-axis label

在yAxes 对象中给它一个scaleLabel 对象，该对象接受labelString (example fiddle)

yAxes: [{
    scaleLabel: {
      labelString: 'Value'
    }
 }]

2。 Shortening xAxis category labels

为此，您可以将userCallback 函数传递给可以返回所需输出的xAxis 刻度对象。该函数将在其第一个参数中接收原始标签，因此您可以返回所需长度的子字符串example fiddle

 xAxes: [{
    ticks: {
      userCallback: function(label, index, labels) {
        if(typeof label === "string")
        {
         return label.substring(0,1)
        }
        return label;

      },
    }
  }],

3. reverse tooltip order

tooltips 对象接受一个名为 itemSort 的函数，该函数可以传递给 Array.prototype.sort。

所以你可以像下面这样，但你可能还需要比较对象索引以及 datasetIndex 以获得你想要的结果。 (example fiddle)

tooltips: {
  mode: 'label',
  itemSort: function(a, b) {
    return b.datasetIndex - a.datasetIndex
  },

},

【讨论】：