Question

我想在间隔时间点上滴答，我该怎么做？

图表标签应该只是白天，但是我有很多刻度，当我只花几个小时时，İt不会在间隔时间内打勾。

https://jsfiddle.net/ykm3uvL2/这个问题我有24小时的x轴标签，但我有100个数据。我怎样才能把这些数据放到24小时。

var config = {
    type: 'line',
    data: {
        labels: hourOfDay,
        datasets: _datasets
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Daily Kw Object'
        },
        tooltips: {
            mode: 'label',
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Time'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: _obj.Items[0].ValueType
                }
            }]
        }
    }
};

var ctx =$("#canvas"+_obj.Id)[0].getContext('2d');
window.myLine = new Chart(ctx,config );

Answer 1

我解决了。现在正在工作。 https://jsfiddle.net/fLjcan5d/感谢moáois试图了解我。

var config = {
type: 'line',
data: {
labels: ['00:00','01:15', '02:00', '03:20', '04:00', '05:00', 
'06:00','07:00','08:00','09:00','10:00','11:00',
    '12:00','13:00','14:00','15:00','16:00','17:00','18:00','23:59'],
    datasets: [{
      label: "My First dataset",
      data: [1, 3, 4, 2, 1, 4, 2],
    }]
  },
  options: {
    scales: {
      xAxes:[{
  type: 'time',
  time: {
    format: "HH:mm",
    unit: 'hour',
    unitStepSize: 1,
    displayFormats: {
      'minute': 'HH:mm', 
      'hour': 'HH:mm', 
      min: '00:00',
      max: '23:59'
    },
}}],
    },
  }
};

Answer 2

除了限制x个刻度之外，您还可以这样做

 ticks: {
          autoSkip: true,
          maxTicksLimit: 20,
          maxRotation: 0,
          minRotation: 0,
        },

如何在图表js中将x轴标签最小化到白天

2 个答案: