Line Chart

Line Chart - 图1

Randomize

options data setup

  1. function getLineColor(ctx) {
  2. return Utils.color(ctx.datasetIndex);
  3. }
  4. function alternatePointStyles(ctx) {
  5. var index = ctx.dataIndex;
  6. return index % 2 === 0 ? 'circle' : 'rect';
  7. }
  8. function makeHalfAsOpaque(ctx) {
  9. return Utils.transparentize(getLineColor(ctx));
  10. }
  11. function adjustRadiusBasedOnData(ctx) {
  12. var v = ctx.parsed.y;
  13. return v < 10 ? 5
  14. : v < 25 ? 7
  15. : v < 50 ? 9
  16. : v < 75 ? 11
  17. : 15;
  18. }
  19. const config = {
  20. type: 'line',
  21. data: data,
  22. options: {
  23. plugins: {
  24. legend: false,
  25. tooltip: true,
  26. },
  27. elements: {
  28. line: {
  29. fill: false,
  30. backgroundColor: getLineColor,
  31. borderColor: getLineColor,
  32. },
  33. point: {
  34. backgroundColor: getLineColor,
  35. hoverBackgroundColor: makeHalfAsOpaque,
  36. radius: adjustRadiusBasedOnData,
  37. pointStyle: alternatePointStyles,
  38. hoverRadius: 15,
  39. }
  40. }
  41. }
  42. };
  1. function generateData() {
  2. return Utils.numbers({
  3. count: DATA_COUNT,
  4. min: 0,
  5. max: 100
  6. });
  7. }
  8. const data = {
  9. labels: Utils.months({count: DATA_COUNT}),
  10. datasets: [{
  11. data: generateData()
  12. }]
  13. };
  1. const DATA_COUNT = 12;
  2. Utils.srand(110);
  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. ];