React 胜利图表：VictoryTooltip 不工作

Question

我正在做一个 React JS 项目。我的应用程序需要以图表格式显示数据。我正在使用 Victory Chart。我可以显示图表。

我现在想做的是，当用户将鼠标光标悬停在条形图的条上时，它应该使用 VictoryTooltip 组件显示工具提示。但它不起作用。

这是我的代码：

<VictoryChart
        responsive={true}
        width={byMonthChartWidth}
        height={byMonthChartHeight}
        padding={byMonthChartPadding}
        domainPadding={byMonthChartDomainPadding}
      >
        <VictoryAxis
          style={{
            axis: {
              stroke: "transparent"
            },
            tickLabels: {
              fill: props.color,
              fontSize: 8,
              fontWeight: "bold"
            }
          }}
          fixLabelOverlap={true}
          tickValues={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
          tickFormat={['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']}
          preserveAspectRatio={"none"}
        />
        <VictoryAxis
          style={{
            axis: {
              stroke: "transparent"
            },
            tickLabels: {
              fill: props.color,
              fontSize: 8,
              fontFamily: "roboto",
              fontWeight: "bold"
            }
          }}
          fixLabelOverlap={true}
          dependentAxis
          tickValues={yAxisTicks}
          tickFormat={(x) => (`${x}`)}
          preserveAspectRatio={"none"}
        />
        <VictoryBar
          labelComponent={
            <VictoryTooltip
              center={{ x: 225, y: 30 }}
              pointerOrientation="bottom"
              flyoutWidth={150}
              flyoutHeight={50}
              pointerWidth={150}
              cornerRadius={0}
            />
          }
          animate={byMonthChartBarAnimation}
          barWidth={byMonthChartBarWidth}
          cornerRadius={{
            topLeft: (data) => 5,
            topRight: (data) => 5,
            bottomLeft: (data) => 5,
            bottomRight: (data) => 5
          }}
          style={{
            data: {
              fill: props.color,
              stroke: props.color,
              fontFamily: "roboto",
              fillOpacity: 1,
              strokeWidth: 1
            }
          }}
          data={data}
          x="identifier"
          y="value"
        />
      </VictoryChart>

如您所见，我正在尝试使用 VictoryBar 组件的 labelComponent 属性显示工具提示。当我将鼠标光标悬停在栏上时，它没有显示任何工具提示。我的代码有什么问题，我该如何解决？

Answer 1

data={data} 中使用的 data 变量必须带有 label 属性，其中包含工具提示的 contents.

您可以通过将 labels 对象添加到 <VictoryBar> 的 style 属性来修改工具提示的字体颜色 - 下面的示例

LIVE DEMO

示例：

        <VictoryBar
          barRatio={1}
          cornerRadius={0}
          style={{ data: { fill: "#6DB65B" }, labels: { fill: "red" } }}
          alignment="middle"
          labels={(d) => d.y}
          labelComponent={
            <VictoryTooltip
              center={{ x: 225, y: 30 }}
              pointerOrientation="bottom"
              flyoutWidth={150}
              flyoutHeight={50}
              pointerWidth={150}
              cornerRadius={0}
              flyoutStyle={{
                stroke: "blue", // border-color
                fill: "yellow", // background-color
              }}
            />
          }
          data={[
            { x: "Year 1", y: 150000, label: "My label 1" },
            { x: "Year 2", y: 250000, label: "My label 1" },
            { x: "Year 3", y: 500020, label: "My label 1" },
            { x: "Year 4", y: 750000, label: "My label 1" },
            { x: "Year 5", y: 1000000, label: "My label 1" }
          ]}
        />

React 胜利图表：VictoryTooltip 不工作

React Victory Chart: VictoryTooltip is not working

reactjs

victory-charts