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

Question

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

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

这些可以实现吗？

我在这里标记了我想改变的内容.

以下是我的图表选项现在的样子:

        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. 添加Y轴标签

在yAxes对象中给它一个scaleLabel接受的对象 labelString (示例小提琴)

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

2. 缩短xAxis类别标签

为此,您可以将userCallback函数传递给可以返回所需输出的xAxis ticks对象.该函数将在其第一个参数中包含原始标签,因此您只需返回所需长度的子字符串,例如小提琴

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

      },
    }
  }],

3. 反向工具提示顺序

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

所以你可以像下面这样,但你可能还需要比较对象索引以及datasetIndex来获得你想要的结果.(例子小提琴)

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

},