Time Scale - Max Span

Time Scale - Max Span - 图1

config setup actions

  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     spanGaps: 1000 * 60 * 60 * 24 * 2, // 2 days
  6.     responsive: true,
  7.     interaction: {
  8.       mode: 'nearest',
  9.     },
  10.     plugins: {
  11.       title: {
  12.         display: true,
  13.         text: 'Chart.js Time - spanGaps: 172800000 (2 days in ms)'
  14.       },
  15.     },
  16.     scales: {
  17.       x: {
  18.         type: 'time',
  19.         display: true,
  20.         title: {
  21.           display: true,
  22.           text: 'Date'
  23.         },
  24.         ticks: {
  25.           autoSkip: false,
  26.           maxRotation: 0,
  27.           major: {
  28.             enabled: true
  29.           },
  30.           // color: function(context) {
  31.           //   return context.tick && context.tick.major ? '#FF0000' : 'rgba(0,0,0,0.1)';
  32.           // },
  33.           font: function(context) {
  34.             if (context.tick && context.tick.major) {
  35.               return {
  36.                 weight: 'bold',
  37.               };
  38.             }
  39.           }
  40.         }
  41.       },
  42.       y: {
  43.         display: true,
  44.         title: {
  45.           display: true,
  46.           text: 'value'
  47.         }
  48.       }
  49.     }
  50.   },
  51. };
  1. const data = {
  2.   datasets: [{
  3.     label: 'Dataset with string point data',
  4.     backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  5.     borderColor: Utils.CHART_COLORS.red,
  6.     fill: false,
  7.     data: [{
  8.       x: Utils.newDateString(0),
  9.       y: Utils.rand(0, 100)
  10.     }, {
  11.       x: Utils.newDateString(2),
  12.       y: Utils.rand(0, 100)
  13.     }, {
  14.       x: Utils.newDateString(4),
  15.       y: Utils.rand(0, 100)
  16.     }, {
  17.       x: Utils.newDateString(6),
  18.       y: Utils.rand(0, 100)
  19.     }],
  20.   }, {
  21.     label: 'Dataset with date object point data',
  22.     backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  23.     borderColor: Utils.CHART_COLORS.blue,
  24.     fill: false,
  25.     data: [{
  26.       x: Utils.newDate(0),
  27.       y: Utils.rand(0, 100)
  28.     }, {
  29.       x: Utils.newDate(2),
  30.       y: Utils.rand(0, 100)
  31.     }, {
  32.       x: Utils.newDate(5),
  33.       y: Utils.rand(0, 100)
  34.     }, {
  35.       x: Utils.newDate(6),
  36.       y: Utils.rand(0, 100)
  37.     }]
  38.   }]
  39. };
  1. const actions = [
  2.   {
  3.     name: 'Randomize',
  4.     handler(chart) {
  5.       chart.data.datasets.forEach(dataset => {
  6.         dataset.data.forEach(function(dataObj, j) {
  7.           const newVal = Utils.rand(0, 100);
  9.           if (typeof dataObj === 'object') {
  10.             dataObj.y = newVal;
  11.           } else {
  12.             dataset.data[j] = newVal;
  13.           }
  14.         });
  15.       });
  16.       chart.update();
  17.     }
  18.   },
  19. ];

Docs