dc.js：TypeError：将HtmlLegend添加到条形图时，无法读取未定义的属性“ 0”

如何解决dc.js：TypeError：将HtmlLegend添加到条形图时，无法读取未定义的属性“ 0”

背景

我正尝试将dc图例添加到dc.js条形图中，如下所示：

state.chart.legend(new dc.HtmlLegend().container(legendElement).horizontal(true).highlightSelected(true))

创建的图表如下：

      const plotBarChart = (data: TrendTimeseries[],width: number) => {
        //@ts-ignore
        state.chart = new dc.BarChart(`#${ state.id }`);
        const barData = new Array<BarChartData>();
        data.forEach((value) => {
          if (value.Timeserie.length > 0 && value.Visible) {
            barData.push({
              Name: value.PlaceName,TruncateName: _.truncate(value.PlaceName,{
                length: 35,separator: ' ',}),//@ts-ignore
              Value: getDataByType(value.Timeserie[0]),Color: value.Color,Timestamp: value.Timeserie[0].timestamp,})
          }
        });
        const ndx = crossfilter(barData);
        const barDimension = ndx.dimension((d) => [d.TruncateName,d.Name,d.Timestamp]);
        const barGroup = barDimension.group().reduceSum((d) => d.Value);
        state.chart
          .dimension(barDimension)
          .group(barGroup)
          .renderTitle(false)
          .width(width)
          .height(280)
          .margins({
            top: 40,right: 40,bottom: 120,left: 40,})
          .x(d3.scaleBand())
          .xUnits(dc.units.ordinal)
          .brushOn(false)
          .transitionDuration(0)
          .barPadding(0.4)
          .outerPadding(0.2)
          //@ts-ignore
          .ordering((d) => {
            //@ts-ignore
            return priority(d.key[0]);
          })
          //@ts-ignore
          .colorAccessor((d) => d)
          //@ts-ignore
          .colors((d) => {
            return getBarColor(d.key[0],barData);
          });

问题

已创建图表和图例div，但未绘制图例，并且控制台显示错误：

TypeError: Cannot read property '0' of undefined

问题

向条形图添加html图例的最佳方法是什么？