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

Question

我正在使用 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"
                        }
                    }]
                }
            }
        });

Answer 1

1. Adding a Y-axis label

在 yAxes 对象中给它一个包含 labelString (example fiddle)

的 scaleLabel 对象

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

2。 Shortening xAxis category labels

为此，您可以将 userCallback 函数传递给 xAxis ticks 对象，它可以 return 您想要的输出。该函数将在其第一个参数中采用原始标签，因此您可以 return 所需长度的子字符串，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。

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

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

},

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

Chart.js Y axis label, reverse tooltip order, shorten X axis labels

javascript

jquery

chart.js

chart.js2