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对象中的

为其提供一个scaleLabel对象，其中包含labelString（example fiddle）

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

<强> 2。 Shortening xAxis category labels

为此，您可以将userCallback函数传递给可以返回所需输出的xAxis ticks对象。该函数将在其第一个参数中包含原始标签，因此您只需返回所需长度的子字符串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 }, },

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

1 个答案: