ChartJS 显示联合边界列堆叠条形图的图表js悬停?

ql3eal8s  于 2023-04-11  发布在  Chart.js
关注(0)|答案(1)|浏览(178)

我有一个堆叠条形图。这是一个条形图的例子:

我需要的是为所有的酒吧做一个边界,像这样:

我尝试向数据集添加边框,但在这种情况下,我为条形图的每个部分都设置了单独的边框:

所以,问题是,我如何为酒吧制作统一的边界?

以下是我的数据集:

  1. const datasets = useMemo(() => [
  2. {
  3. type: 'line' as ChartType,
  4. label: MULTI_BAR_CHART_LINE_NAME,
  5. data: data.map(item => item.firstValue),
  6. fill: false,
  7. borderColor: `${theme`colors.advisor-red-300`}`,
  8. tension: 0.2,
  9. pointRadius: 0,
  10. hoverPointRadius: 0,
  11. },
  12. {
  13. type: 'bar' as ChartType,
  14. label: chartLegendLabels.firstLabel,
  15. data: data.map(item => item.firstValue),
  16. backgroundColor: `${theme`colors.advisor-red-300`}`,
  17. stack: 'standing costs',
  18. barPercentage: 0.3,
  19. },
  20. {
  21. type: 'bar' as ChartType,
  22. label: chartLegendLabels.secondLabel,
  23. data: data.map(item => item.secondValue),
  24. backgroundColor: `${theme`colors.advisor-yellow-200`}`,
  25. stack: 'standing costs',
  26. barPercentage: 0.3,
  27. },
  28. {
  29. type: 'bar' as ChartType,
  30. label: chartLegendLabels.thirdLabel,
  31. data: data.map(item => item.thirdValue),
  32. backgroundColor: `${theme`colors.advisor-tissue-graph-border-sufficient`}`,
  33. stack: 'standing costs',
  34. barPercentage: 0.3,
  35. hoverBorderRadius: 8,
  36. },
  37. ], [data, chartLegendLabels]);
hvvq6cgz

hvvq6cgz1#

I got it))
所有我必须做的是添加另一个酒吧与透明的背景和边界悬停

  1. {
  2. type: 'bar' as ChartType,
  3. label: '',
  4. data: data.map(item => item.thirdValue + item.secondValue + item.firstValue),
  5. backgroundColor: `transparent`,
  6. barPercentage: 0.3,
  7. hoverBorderRadius: 8,
  8. borderColor: 'rgb(153, 102, 255)',
  9. hoverBorderWidth: 5,
  10. },

相关问题