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);
  8. if (typeof dataObj === 'object') {
  9. dataObj.y = newVal;
  10. } else {
  11. dataset.data[j] = newVal;
  12. }
  13. });
  14. });
  15. chart.update();
  16. }
  17. },
  18. ];

Docs