Stepped Line Charts

Stepped Line Charts - 图1

Step: false (default) Step: true Step: before Step: after Step: middle

config setup actions

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. responsive: true,
  6. interaction: {
  7. intersect: false,
  8. axis: 'x'
  9. },
  10. plugins: {
  11. title: {
  12. display: true,
  13. text: (ctx) => 'Step ' + ctx.chart.data.datasets[0].stepped + ' Interpolation',
  14. }
  15. }
  16. }
  17. };
  1. const data = {
  2. labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
  3. datasets: [
  4. {
  5. label: 'Dataset',
  6. data: Utils.numbers({count: 6, min: -100, max: 100}),
  7. borderColor: Utils.CHART_COLORS.red,
  8. fill: false,
  9. stepped: true,
  10. }
  11. ]
  12. };
  1. const actions = [
  2. {
  3. name: 'Step: false (default)',
  4. handler: (chart) => {
  5. chart.data.datasets.forEach(dataset => {
  6. dataset.stepped = false;
  7. });
  8. chart.update();
  9. }
  10. },
  11. {
  12. name: 'Step: true',
  13. handler: (chart) => {
  14. chart.data.datasets.forEach(dataset => {
  15. dataset.stepped = true;
  16. });
  17. chart.update();
  18. }
  19. },
  20. {
  21. name: 'Step: before',
  22. handler: (chart) => {
  23. chart.data.datasets.forEach(dataset => {
  24. dataset.stepped = 'before';
  25. });
  26. chart.update();
  27. }
  28. },
  29. {
  30. name: 'Step: after',
  31. handler: (chart) => {
  32. chart.data.datasets.forEach(dataset => {
  33. dataset.stepped = 'after';
  34. });
  35. chart.update();
  36. }
  37. },
  38. {
  39. name: 'Step: middle',
  40. handler: (chart) => {
  41. chart.data.datasets.forEach(dataset => {
  42. dataset.stepped = 'middle';
  43. });
  44. chart.update();
  45. }
  46. }
  47. ];