Line Chart drawTime

Line Chart drawTime - 图1

drawTime: beforeDatasetDraw (default)drawTime: beforeDatasetsDrawdrawTime: beforeDrawRandomizeSmooth

data config setup actions

  1. const data = {
  2. labels: generateLabels(),
  3. datasets: [
  4. {
  5. label: 'Dataset 1',
  6. data: generateData(),
  7. borderColor: Utils.CHART_COLORS.red,
  8. backgroundColor: Utils.CHART_COLORS.red,
  9. fill: true
  10. },
  11. {
  12. label: 'Dataset 2',
  13. data: generateData(),
  14. borderColor: Utils.CHART_COLORS.blue,
  15. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
  16. fill: true
  17. }
  18. ]
  19. };
  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. plugins: {
  6. filler: {
  7. propagate: false,
  8. },
  9. title: {
  10. display: true,
  11. text: (ctx) => 'drawTime: ' + ctx.chart.options.plugins.filler.drawTime
  12. }
  13. },
  14. pointBackgroundColor: '#fff',
  15. radius: 10,
  16. interaction: {
  17. intersect: false,
  18. }
  19. },
  20. };
  1. const inputs = {
  2. min: -100,
  3. max: 100,
  4. count: 8,
  5. decimals: 2,
  6. continuity: 1
  7. };
  8. const generateLabels = () => {
  9. return Utils.months({count: inputs.count});
  10. };
  11. Utils.srand(3);
  12. const generateData = () => (Utils.numbers(inputs));
  1. let smooth = false;
  2. const actions = [
  3. {
  4. name: 'drawTime: beforeDatasetDraw (default)',
  5. handler: (chart) => {
  6. chart.options.plugins.filler.drawTime = 'beforeDatasetDraw';
  7. chart.update();
  8. }
  9. },
  10. {
  11. name: 'drawTime: beforeDatasetsDraw',
  12. handler: (chart) => {
  13. chart.options.plugins.filler.drawTime = 'beforeDatasetsDraw';
  14. chart.update();
  15. }
  16. },
  17. {
  18. name: 'drawTime: beforeDraw',
  19. handler: (chart) => {
  20. chart.options.plugins.filler.drawTime = 'beforeDraw';
  21. chart.update();
  22. }
  23. },
  24. {
  25. name: 'Randomize',
  26. handler(chart) {
  27. chart.data.datasets.forEach(dataset => {
  28. dataset.data = generateData();
  29. });
  30. chart.update();
  31. }
  32. },
  33. {
  34. name: 'Smooth',
  35. handler(chart) {
  36. smooth = !smooth;
  37. chart.options.elements.line.tension = smooth ? 0.4 : 0;
  38. chart.update();
  39. }
  40. }
  41. ];