Derived Chart Type

Derived Chart Type - 图1

config setup

  1. const config = {
  2. type: 'derivedBubble',
  3. data: data,
  4. options: {
  5. responsive: true,
  6. plugins: {
  7. title: {
  8. display: true,
  9. text: 'Derived Chart Type'
  10. },
  11. }
  12. }
  13. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100, rmin: 1, rmax: 20};
  3. const data = {
  4. datasets: [
  5. {
  6. label: 'My First dataset',
  7. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  8. borderColor: Utils.CHART_COLORS.blue,
  9. borderWidth: 1,
  10. boxStrokeStyle: 'red',
  11. data: Utils.bubbles(NUMBER_CFG)
  12. }
  13. ],
  14. };

DerivedBubble Implementation

  1. import {Chart, BubbleController} from 'chart.js';
  2. class Custom extends BubbleController {
  3. draw() {
  4. // Call bubble controller method to draw all the points
  5. super.draw(arguments);
  6. // Now we can do some custom drawing for this dataset.
  7. // Here we'll draw a box around the first point in each dataset,
  8. // using `boxStrokeStyle` dataset option for color
  9. var meta = this.getMeta();
  10. var pt0 = meta.data[0];
  11. const {x, y} = pt0.getProps(['x', 'y']);
  12. const {radius} = pt0.options;
  13. var ctx = this.chart.ctx;
  14. ctx.save();
  15. ctx.strokeStyle = this.options.boxStrokeStyle;
  16. ctx.lineWidth = 1;
  17. ctx.strokeRect(x - radius, y - radius, 2 * radius, 2 * radius);
  18. ctx.restore();
  19. }
  20. }
  21. Custom.id = 'derivedBubble';
  22. Custom.defaults = {
  23. // Custom defaults. Bubble defaults are inherited.
  24. boxStrokeStyle: 'red'
  25. };
  26. // Overrides are only inherited, but not merged if defined
  27. // Custom.overrides = Chart.overrides.bubble;
  28. // Stores the controller so that the chart initialization routine can look it up
  29. Chart.register(Custom);

Docs