如何在react-chartjs-2 Line组件中删除点标签?

lvjbypge  于 2023-11-18  发布在  Chart.js
关注(0)|答案(1)|浏览(180)

我正在使用来自react-chartjs-2Line组件,在删除线上的标签时遇到了麻烦。
Line Graph Result
线路选项:

  1. const chartOptions: DeepPartial<
  2. CoreChartOptions<"line"> &
  3. ElementChartOptions<"line"> &
  4. PluginChartOptions<"line"> &
  5. DatasetChartOptions<"line"> &
  6. ScaleChartOptions<"line"> &
  7. LineControllerChartOptions
  8. > = {
  9. responsive: true,
  10. plugins: {
  11. legend: {
  12. position: "top" as const,
  13. },
  14. title: {
  15. display: false,
  16. },
  17. },
  18. elements: {
  19. point: {
  20. radius: 2,
  21. },
  22. },
  23. };

字符串
行数据:

  1. const chartData: ChartData<"line", number[], string> = {
  2. labels: Object.keys(sampleData),
  3. datasets: [
  4. {
  5. label: "Score",
  6. data: Object.values(sampleData).map(
  7. (val) => Math.round(val * 100) / 100
  8. ),
  9. backgroundColor: "#FF6384",
  10. borderColor: "#FF6384",
  11. pointRadius: 1,
  12. borderWidth: 2,
  13. tension: 0.1,
  14. } as ChartDataset<"line", number[]>,
  15. ],
  16. };


示例数据:

  1. const sampleData = {
  2. "2016-08-28": 0.5786274509803921,
  3. "2016-10-09": -0.5872549019607842,
  4. "2016-10-10": 0.02058823529411765,
  5. "2016-11-07": 0.05679738562091504,
  6. }

whitzsjs

whitzsjs1#

找到了隐藏数据点标签的正确配置。它是:

  1. plugins: {
  2. datalabels: {
  3. display: false,
  4. },
  5. }

字符串
找到它在这里为感兴趣的人:Chartjs hide data point labels

相关问题