ChartJS - 更正显示的折线图，标签和数据集的值不相同

Question

我有以下图表配置：

问题在于文档说：

每个数据点必须有一个标签。

但我需要显示包含以下内容的图表：

561标签

和

61263数据集值

使用下面的配置会产生以下结果：

但我想显示这样的结果：

我想问一下，使用 Chart.js 库可以做到这一点，或者我应该使用任何其他库进行数据可视化，例如 D3.js 或定制解决方案？

欢迎任何示例或提示。

非常感谢您的任何建议。

   var myChart = new Chart(ctx, {
                        type: $scope.CONST.CHART_TYPE_LINE,
                        data: {
                            xLabels: labelsArr, // VS
                            // Array of the datasets which want to display
                            datasets: [{
                                data: valuesArr,
                                //cubicInterpolationMode:'monotone',
                                //lineTension:0.1,
                                //spanGaps:true,
                                borderColor: "#0000C0",
                                borderWidth: 1,
                                fill: false,
                                steppedLine:true //If true, the line is shown as a stepped line and 'lineTension' will be ignored
                            }]
                        },
                        options: {
                            responsive: true,
                            /*TEST*/
                            scaleOverride: true,
                            scale: 1,
                            scaleSteps:0,
                            scaleStartValue:0,
                            scaleStepWidth:1,
                            /*TEST*/
                            legend: {
                                display: false
                            },
                            scales: {
                                xAxes: [{
                                    //display:false, Hide the axis
                                    position: 'bottom',
                                    gridLines: {
                                        zeroLineColor: "rgba(0,255,0,1)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        //labelString: 'x axis'
                                    },
                                    ticks: {
                                        maxRotation: 0,
                                        // Vertical labels at bottom
                                        userCallback: function(tick, value, ticks) {
                                            // `ticks` is the default display
                                            // `.split("")` makes it an array of every character
                                            // console.log("Value is " +value);
                                            return tick.split("");
                                        }
                                    }
                                }],
                                yAxes: [{
                                    gridLines: {
                                        display: true,
                                        lineWidth: 1, borderColor: '#66f',
                                        borderDash: [10, 5],
                                        color: "black"
                                    }

                                }]
                            }
                        }
                    });