Line Chart Datasets

Line Chart Datasets - 图1

Randomize Propagate Smooth

data config setup actions

  1. const data = {
  2. labels: generateLabels(),
  3. datasets: [
  4. {
  5. label: 'D0',
  6. data: generateData(),
  7. borderColor: Utils.CHART_COLORS.red,
  8. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
  9. hidden: true
  10. },
  11. {
  12. label: 'D1',
  13. data: generateData(),
  14. borderColor: Utils.CHART_COLORS.orange,
  15. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.orange),
  16. fill: '-1'
  17. },
  18. {
  19. label: 'D2',
  20. data: generateData(),
  21. borderColor: Utils.CHART_COLORS.yellow,
  22. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.yellow),
  23. hidden: true,
  24. fill: 1
  25. },
  26. {
  27. label: 'D3',
  28. data: generateData(),
  29. borderColor: Utils.CHART_COLORS.green,
  30. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.green),
  31. fill: '-1'
  32. },
  33. {
  34. label: 'D4',
  35. data: generateData(),
  36. borderColor: Utils.CHART_COLORS.blue,
  37. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
  38. fill: '-1'
  39. },
  40. {
  41. label: 'D5',
  42. data: generateData(),
  43. borderColor: Utils.CHART_COLORS.grey,
  44. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.grey),
  45. fill: '+2'
  46. },
  47. {
  48. label: 'D6',
  49. data: generateData(),
  50. borderColor: Utils.CHART_COLORS.purple,
  51. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.purple),
  52. fill: false
  53. },
  54. {
  55. label: 'D7',
  56. data: generateData(),
  57. borderColor: Utils.CHART_COLORS.red,
  58. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
  59. fill: 8
  60. },
  61. {
  62. label: 'D8',
  63. data: generateData(),
  64. borderColor: Utils.CHART_COLORS.orange,
  65. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.orange),
  66. fill: 'end',
  67. hidden: true
  68. },
  69. {
  70. label: 'D9',
  71. data: generateData(),
  72. borderColor: Utils.CHART_COLORS.yellow,
  73. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.yellow),
  74. fill: {above: 'blue', below: 'red', target: {value: 350}}
  75. }
  76. ]
  77. };
  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. scales: {
  6. y: {
  7. stacked: true
  8. }
  9. },
  10. plugins: {
  11. filler: {
  12. propagate: false
  13. },
  14. 'samples-filler-analyser': {
  15. target: 'chart-analyser'
  16. }
  17. },
  18. interaction: {
  19. intersect: false,
  20. },
  21. },
  22. };
  1. const inputs = {
  2. min: 20,
  3. max: 80,
  4. count: 8,
  5. decimals: 2,
  6. continuity: 1
  7. };
  8. const generateLabels = () => {
  9. return Utils.months({count: inputs.count});
  10. };
  11. const generateData = () => (Utils.numbers(inputs));
  12. Utils.srand(42);
  1. let smooth = false;
  2. let propagate = false;
  3. const actions = [
  4. {
  5. name: 'Randomize',
  6. handler(chart) {
  7. chart.data.datasets.forEach(dataset => {
  8. dataset.data = generateData();
  9. });
  10. chart.update();
  11. }
  12. },
  13. {
  14. name: 'Propagate',
  15. handler(chart) {
  16. propagate = !propagate;
  17. chart.options.plugins.filler.propagate = propagate;
  18. chart.update();
  19. }
  20. },
  21. {
  22. name: 'Smooth',
  23. handler(chart) {
  24. smooth = !smooth;
  25. chart.options.elements.line.tension = smooth ? 0.4 : 0;
  26. chart.update();
  27. }
  28. }
  29. ];
DatasetFillTarget (visibility)
0undefined(hidden)
1“-1”dataset 0
21(hidden)
3“-1”dataset 2
4“-1”dataset 3
5“+2”dataset 7
6falsenone
78dataset 8
8“end”(hidden)
9{“above”:”blue”,”below”:”red”,”target”:{“value”:350}}boundary “[object Object]”