Quadrants

Quadrants - 图1

Randomize

config plugin data

  1. const config = {
  2.   type: 'scatter',
  3.   data: data,
  4.   options: {
  5.     plugins: {
  6.       quadrants: {
  7.         topLeft: Utils.CHART_COLORS.red,
  8.         topRight: Utils.CHART_COLORS.blue,
  9.         bottomRight: Utils.CHART_COLORS.green,
  10.         bottomLeft: Utils.CHART_COLORS.yellow,
  11.       }
  12.     }
  13.   },
  14.   plugins: [quadrants]
  15. };
  1. const quadrants = {
  2.   id: 'quadrants',
  3.   beforeDraw(chart, args, options) {
  4.     const {ctx, chartArea: {left, top, right, bottom}, scales: {x, y}} = chart;
  5.     const midX = x.getPixelForValue(0);
  6.     const midY = y.getPixelForValue(0);
  7.     ctx.save();
  8.     ctx.fillStyle = options.topLeft;
  9.     ctx.fillRect(left, top, midX - left, midY - top);
  10.     ctx.fillStyle = options.topRight;
  11.     ctx.fillRect(midX, top, right - midX, midY - top);
  12.     ctx.fillStyle = options.bottomRight;
  13.     ctx.fillRect(midX, midY, right - midX, bottom - midY);
  14.     ctx.fillStyle = options.bottomLeft;
  15.     ctx.fillRect(left, midY, midX - left, bottom - midY);
  16.     ctx.restore();
  17.   }
  18. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  3. const data = {
  4.   datasets: [
  5.     {
  6.       label: 'Dataset 1',
  7.       data: Utils.points(NUMBER_CFG),
  8.       borderColor: Utils.CHART_COLORS.red,
  9.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  10.     },
  11.     {
  12.       label: 'Dataset 2',
  13.       data: Utils.points(NUMBER_CFG),
  14.       borderColor: Utils.CHART_COLORS.blue,
  15.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  16.     }
  17.   ]
  18. };

Docs