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

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

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

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

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

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

以下是我的数据集:

const datasets = useMemo(() => [
    {
      type:              'line' as ChartType,
      label:             MULTI_BAR_CHART_LINE_NAME,
      data:              data.map(item => item.firstValue),
      fill:              false,
      borderColor:       `${theme`colors.advisor-red-300`}`,
      tension:           0.2,
      pointRadius:       0,
      hoverPointRadius:  0,
    },
    {
      type:               'bar' as ChartType,
      label:              chartLegendLabels.firstLabel,
      data:               data.map(item => item.firstValue),
      backgroundColor:    `${theme`colors.advisor-red-300`}`,
      stack:              'standing costs',
      barPercentage:        0.3,
    },
    {
      type:              'bar' as ChartType,
      label:             chartLegendLabels.secondLabel,
      data:              data.map(item => item.secondValue),
      backgroundColor:   `${theme`colors.advisor-yellow-200`}`,
      stack:             'standing costs',
      barPercentage:     0.3,
    },
    {
      type:              'bar' as ChartType,
      label:             chartLegendLabels.thirdLabel,
      data:              data.map(item => item.thirdValue),
      backgroundColor:   `${theme`colors.advisor-tissue-graph-border-sufficient`}`,
      stack:             'standing costs',
      barPercentage:     0.3,
      hoverBorderRadius: 8,
    },
  ], [data, chartLegendLabels]);
hvvq6cgz

hvvq6cgz1#

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

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

相关问题