Time Scale - Combo Chart

Time Scale - Combo Chart - 图1

config setup actions

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. plugins: {
  6. title: {
  7. text: 'Chart.js Combo Time Scale',
  8. display: true
  9. }
  10. },
  11. scales: {
  12. x: {
  13. type: 'time',
  14. display: true,
  15. offset: true,
  16. time: {
  17. unit: 'day'
  18. }
  19. },
  20. },
  21. },
  22. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
  3. const labels = [];
  4. for (let i = 0; i < DATA_COUNT; ++i) {
  5. labels.push(Utils.newDate(i));
  6. }
  7. const data = {
  8. labels: labels,
  9. datasets: [{
  10. type: 'bar',
  11. label: 'Dataset 1',
  12. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  13. borderColor: Utils.CHART_COLORS.red,
  14. data: Utils.numbers(NUMBER_CFG),
  15. }, {
  16. type: 'bar',
  17. label: 'Dataset 2',
  18. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  19. borderColor: Utils.CHART_COLORS.blue,
  20. data: Utils.numbers(NUMBER_CFG),
  21. }, {
  22. type: 'line',
  23. label: 'Dataset 3',
  24. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.green, 0.5),
  25. borderColor: Utils.CHART_COLORS.green,
  26. fill: false,
  27. data: Utils.numbers(NUMBER_CFG),
  28. }]
  29. };
  1. const actions = [
  2. {
  3. name: 'Randomize',
  4. handler(chart) {
  5. chart.data.datasets.forEach(dataset => {
  6. dataset.data = Utils.numbers({count: chart.data.labels.length, min: 0, max: 100});
  7. });
  8. chart.update();
  9. }
  10. },
  11. ];