Scatter - Multi axis

Scatter - Multi axis - 图1

Randomize Add Dataset Add Data Remove Dataset Remove Data

config setup actions

  1. const config = {
  2. type: 'scatter',
  3. data: data,
  4. options: {
  5. responsive: true,
  6. plugins: {
  7. legend: {
  8. position: 'top',
  9. },
  10. title: {
  11. display: true,
  12. text: 'Chart.js Scatter Multi Axis Chart'
  13. }
  14. },
  15. scales: {
  16. y: {
  17. type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
  18. position: 'left',
  19. ticks: {
  20. color: Utils.CHART_COLORS.red
  21. }
  22. },
  23. y2: {
  24. type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
  25. position: 'right',
  26. reverse: true,
  27. ticks: {
  28. color: Utils.CHART_COLORS.blue
  29. },
  30. grid: {
  31. drawOnChartArea: false // only want the grid lines for one axis to show up
  32. }
  33. }
  34. }
  35. },
  36. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, rmin: 1, rmax: 1, min: -100, max: 100};
  3. const labels = Utils.months({count: 7});
  4. const data = {
  5. labels: labels,
  6. datasets: [
  7. {
  8. label: 'Dataset 1',
  9. data: Utils.bubbles(NUMBER_CFG),
  10. borderColor: Utils.CHART_COLORS.red,
  11. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12. yAxisID: 'y',
  13. },
  14. {
  15. label: 'Dataset 2',
  16. data: Utils.bubbles(NUMBER_CFG),
  17. borderColor: Utils.CHART_COLORS.orange,
  18. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.orange, 0.5),
  19. yAxisID: 'y2',
  20. }
  21. ]
  22. };
  1. const actions = [
  2. {
  3. name: 'Randomize',
  4. handler(chart) {
  5. chart.data.datasets.forEach(dataset => {
  6. dataset.data = Utils.bubbles({count: chart.data.labels.length, rmin: 1, rmax: 1, min: -100, max: 100});
  7. });
  8. chart.update();
  9. }
  10. },
  11. {
  12. name: 'Add Dataset',
  13. handler(chart) {
  14. const data = chart.data;
  15. const dsColor = Utils.namedColor(chart.data.datasets.length);
  16. const newDataset = {
  17. label: 'Dataset ' + (data.datasets.length + 1),
  18. backgroundColor: Utils.transparentize(dsColor, 0.5),
  19. borderColor: dsColor,
  20. data: Utils.bubbles({count: data.labels.length, rmin: 1, rmax: 1, min: -100, max: 100}),
  21. };
  22. chart.data.datasets.push(newDataset);
  23. chart.update();
  24. }
  25. },
  26. {
  27. name: 'Add Data',
  28. handler(chart) {
  29. const data = chart.data;
  30. if (data.datasets.length > 0) {
  31. for (var index = 0; index < data.datasets.length; ++index) {
  32. data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 1, rmax: 1, min: -100, max: 100})[0]);
  33. }
  34. chart.update();
  35. }
  36. }
  37. },
  38. {
  39. name: 'Remove Dataset',
  40. handler(chart) {
  41. chart.data.datasets.pop();
  42. chart.update();
  43. }
  44. },
  45. {
  46. name: 'Remove Data',
  47. handler(chart) {
  48. chart.data.labels.splice(-1, 1); // remove the label first
  49. chart.data.datasets.forEach(dataset => {
  50. dataset.data.pop();
  51. });
  52. chart.update();
  53. }
  54. }
  55. ];