更改散点图ChartJS中可隐藏数据集的可见性

c2e8gylq  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(197)

我使用以下配置和数据制作了这个图表,并希望摆脱图表的概述部分,但找不到文档,因为它似乎是这种类型的图表的默认设置:

  1. `<canvas id="myChart"></canvas>
  2. <script>
  3. //get the csv data
  4. const chartData = "/static/csv/result.csv";
  5. //parse
  6. // const parseData = d3.csvParse(chartData)
  7. d3.csv(chartData).then(function(data) {
  8. console.log(data)
  9. const x = data.map(function(d) {
  10. return d.Algorithm
  11. })
  12. const y = data.map(function(d) {
  13. return d.Cost
  14. })
  15. const z = data.map(function(d) {
  16. return d.Time
  17. })`
  18. const ctx = document.getElementById('myChart').getContext('2d');
  19. const dataForConfig = {
  20. // labels: x,
  21. datasets: x.map((ds, i) => {
  22. return {
  23. label: x[i],
  24. data: [{
  25. x: y[i],
  26. y: z[i]
  27. }],
  28. backgroundColor: 'rgba(255, 99, 132, 0.2)',
  29. // borderColor: 'rgba(255, 99, 0, 1)',
  30. //I want the border color of a point to depend on the algorithm
  31. borderColor: function(context) {
  32. // var index = context.dataIndex;
  33. // var value = context.dataset.data[index];
  34. var type = context.dataset.label;
  35. // console.log('WHATTHEFUCK', type)
  36. return type == "Algorithm" ? 'red' : // draw negative values in red
  37. type == "Knapsack" ? 'blue' : // else, alternate values in blue and green
  38. type == "Recursive Knapsack" ? 'green' :
  39. type == "Static" ? 'purple' :
  40. type == "Dynamic" ? "brown" : 'black'
  41. },
  42. borderWidth: 1
  43. }
  44. })
  45. }
  46. const myChart = new Chart(ctx, {
  47. type: 'scatter',
  48. data: dataForConfig,
  49. labels: {
  50. visible: false
  51. },
  52. options: {
  53. legend: {
  54. display: false
  55. },
  56. scales: {
  57. y: {
  58. beginAtZero: true,
  59. stepSize: 0.05,
  60. }
  61. }
  62. }
  63. });
  64. })
  65. </script>
  66. [![Graph](https://i.stack.imgur.com/mmD3v.jpg)](https://i.stack.imgur.com/mmD3v.jpg)
  67. What options do I have to make not visible for that pseudo-legend/interactive key to go away
  68. Thanks

到目前为止,我已经尝试使配置中的几乎每一个值都不可见,但无济于事

k3bvogb1

k3bvogb11#

要删除图例,您应该禁用它(就像您在错误的配置节点中部分地做的那样)。

  1. options: {
  2. plugins: {
  3. legend: false,
  4. }
  5. ...
  6. }

  1. options: {
  2. plugins: {
  3. legend: {
  4. display: false
  5. },
  6. }
  7. ...
  8. }
展开查看全部

相关问题