Time Scale

Time Scale - 图1

Randomize

config setup actions

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. plugins: {
  6. title: {
  7. text: 'Chart.js Time Scale',
  8. display: true
  9. }
  10. },
  11. scales: {
  12. x: {
  13. type: 'time',
  14. time: {
  15. // Luxon format string
  16. tooltipFormat: 'DD T'
  17. },
  18. title: {
  19. display: true,
  20. text: 'Date'
  21. }
  22. },
  23. y: {
  24. title: {
  25. display: true,
  26. text: 'value'
  27. }
  28. }
  29. },
  30. },
  31. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
  3. const data = {
  4. labels: [ // Date Objects
  5. Utils.newDate(0),
  6. Utils.newDate(1),
  7. Utils.newDate(2),
  8. Utils.newDate(3),
  9. Utils.newDate(4),
  10. Utils.newDate(5),
  11. Utils.newDate(6)
  12. ],
  13. datasets: [{
  14. label: 'My First dataset',
  15. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  16. borderColor: Utils.CHART_COLORS.red,
  17. fill: false,
  18. data: Utils.numbers(NUMBER_CFG),
  19. }, {
  20. label: 'My Second dataset',
  21. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  22. borderColor: Utils.CHART_COLORS.blue,
  23. fill: false,
  24. data: Utils.numbers(NUMBER_CFG),
  25. }, {
  26. label: 'Dataset with point data',
  27. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.green, 0.5),
  28. borderColor: Utils.CHART_COLORS.green,
  29. fill: false,
  30. data: [{
  31. x: Utils.newDateString(0),
  32. y: Utils.rand(0, 100)
  33. }, {
  34. x: Utils.newDateString(5),
  35. y: Utils.rand(0, 100)
  36. }, {
  37. x: Utils.newDateString(7),
  38. y: Utils.rand(0, 100)
  39. }, {
  40. x: Utils.newDateString(15),
  41. y: Utils.rand(0, 100)
  42. }],
  43. }]
  44. };
  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. ];