JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – Chart.js:仅在x轴上显示数据点的标签大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Chart.js创建一个图表,并且我的折线图的x轴有问题.我已经制作了一个多线图,一切都很好看,如下图所示.
我想要实现的是,当图表上有数据点时,我的x轴上的标签(日期)才会显示,所以现在不是所有的日子.我对整个Web开发工作没有那么多经验,所以任何帮助都会受到赞赏.提前致谢.

我的代码如下:

function newDate(day,month) {
  return moment().date(day).month(month);
}

var ctx = document.getElementById("chart_hr");
var tabPane = document.getElementById("overview_hr");
var data = {
    labels: [newDate(8,8),newDate(10,newDate(12,newDate(17,newDate(21,newDate(23,newDate(28,newDate(1,9),newDate(4,9)],datasets: [
        {
            fill: false,data: [140,180,150,170],lineTension: 0,},{
            fill: false,data: [80,100,80,100],}
    ]
};
var options = {
    scales: {
      xAxes: [{
        type: 'time',time: {
          displayFormats: {
            'millisecond': 'DD MMM','second': 'DD MMM','minute': 'DD MMM','hour': 'DD MMM','day': 'DD MMM','week': 'DD MMM','month': 'DD MMM','quarter': 'DD MMM','year': 'DD MMM',unitStepSize: 1,unit: 'day',gridLines : {
            display : false,}
      }],yAxes: [{
        ticks: {
            min: 50,max: 190,stepSize: 10,};
var myLineChart = new Chart(ctx,{
    type: 'line',data: data,options: options
});

解决方法

通过使用ticks回调方法和设置autoSkip false解决了这个问题.但是,我没有使用Timescale.在回调中,您可以传递日期和所需格式,它将返回格式化日期.
下面是相同和工作示例代码的屏幕截图.
@L_616_1@

[样本代码]

var ctx = document.getElementById("chart_hr");
    function newDate(day,month) {
        return moment().date(day).month(month);
    }


var data = {
    labels: [newDate(8,}
    ]
};
var options = {
    scales: {
        xAxes: [{
            ticks: {
                autoSkip : false,callBACk: function(value,index,values) {
                    return new moment(value).format('DD MMM');
                }
            },gridLines : {
                display : false,}
        }],yAxes: [{
            ticks: {
                min: 50,stepSize: 10
            }
        }],options: options
});

大佬总结

以上是大佬教程为你收集整理的javascript – Chart.js:仅在x轴上显示数据点的标签全部内容,希望文章能够帮你解决javascript – Chart.js:仅在x轴上显示数据点的标签所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。