如何在React KendoUI Chart中按条件显示标签

要实现仅显示值大于0的图表标签，你可以利用Kendo UI Chart的ChartSeriesLabels组件的content属性——它支持传入一个函数，根据每个数据点的动态值来决定是否显示标签内容。

修改后的代码示例 #

const seriesData = [0, 40, 45, 30, 42, 0];
const ChartContainer = () => (
  <Chart>
    <ChartSeries>
      <ChartSeriesItem type="column" data={seriesData}>
        <ChartSeriesLabels
          position="center"
          background="transparent"
          color="black"
          font="bold 16px Arial, sans-serif"
          // 通过content函数控制标签显示
          content={(e) => e.value > 0 ? `${e.value}` : ''}
        />
      </ChartSeriesItem>
    </ChartSeries>
  </Chart>
);

实现原理 #

• content函数会接收每个数据点的上下文参数e，其中e.value就是当前系列项的数值。
• 当e.value > 0时，返回数值的字符串形式，标签会正常显示；当数值小于等于0时，返回空字符串，标签就不会渲染出来。
• 无需额外设置visible={true}，只要content返回非空内容，标签就会自动显示。

内容的提问来源于stack exchange，提问作者alex-yonme