Javascript dc.js:TypeError:无法读取属性'；0'；将HtmlGend添加到条形图时的未定义值

背景

我正在尝试向dc.js条形图添加一个html图例，如下所示：

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);
          });

图表的创建如下所示：

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);
          });

问题

---

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

条形图图例目前仅适用于组合和堆栈功能，而不适用于在同一系列中分别为条形图着色的情况。请看,；虽然它有一些不相关的信息，但它讨论了如何自定义

.legendables（）

如果您无法理解，请编辑您的问题并添加示例数据和足够的代码来运行示例，以及所获得错误的堆栈跟踪。条形图的图例目前仅适用于复合和堆栈功能，而不适用于在同一系列中分别为条形图着色的情况。请看,；虽然它有一些不相关的信息，但它讨论了如何自定义

.legendables（）

如果您无法理解，请编辑您的问题，并添加示例数据和足够的代码来运行示例，以及所获得错误的堆栈跟踪。