React Google Charts工具提示数字改为印度计数系统技术问询

要将工具提示中的数字改为印度计数系统（如123456显示为1,23,456，1000000显示为10,00,000），可以通过两种方式实现：

方法一：同时格式化坐标轴和工具提示 #

这种方法使用Google Charts内置的NumberFormat类，将数据列格式化为印度计数系统，坐标轴标签和工具提示都会显示格式化后的数字。

修改后的组件代码：

import React from "react";
import { Chart } from "react-google-charts";

class BarChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formattedData: null
    };
  }

  componentDidUpdate(prevProps) {
    if (prevProps.data !== this.props.data) {
      this.formatChartData();
    }
  }

  componentDidMount() {
    this.formatChartData();
  }

  convertDataToChartData = (data) => {
    const modified_data = {};
    if (!data) {
      modified_data[""] = 0;
    } else {
      data.forEach((value) => {
        modified_data[value.x] = Number(value.y) ?? value.y;
      });
    }

    const chartData = [["Month"]];
    const months = Object.keys(modified_data);

    chartData[0] = chartData[0].concat(months);

    for (let i = 0; i < months.length; i++) {
      const month = months[i];
      const value = modified_data[month];
      const column = [month];

      for (let j = 0; j < months.length; j++) {
        column.push(j === i ? value : 0);
      }

      chartData.push(column);
    }
    return chartData;
  };

  formatChartData = () => {
    if (!window.google?.visualization) {
      setTimeout(() => this.formatChartData(), 100);
      return;
    }

    const chartData = this.convertDataToChartData(this.props.data);
    const dataTable = new window.google.visualization.DataTable();

    dataTable.addColumn('string', 'Month');
    for (let i = 1; i < chartData[0].length; i++) {
      dataTable.addColumn('number', chartData[0][i]);
    }

    dataTable.addRows(chartData.slice(1));

    const indianFormatter = new window.google.visualization.NumberFormat({
      locale: 'en-IN',
      decimalSymbol: '.',
      groupingSymbol: ','
    });

    for (let colIndex = 1; colIndex < dataTable.getNumberOfColumns(); colIndex++) {
      indianFormatter.format(dataTable, colIndex);
    }

    this.setState({ formattedData: dataTable });
  };

  render() {
    try {
      const { ishorizontal, Haxis, Vaxis, legendposition } = this.props;
      const { formattedData } = this.state;

      if (!formattedData) {
        return <div>加载图表中...</div>;
      }

      const chartOptions = {
        hAxis: { title: Haxis },
        vAxis: { title: Vaxis },
        legend: { position: legendposition },
        isStacked: true,
        series: {},
        orientation: ishorizontal ? "horizontal" : "vertical",
        animation: {
          startup: true,
          easing: "linear",
          duration: 300,
        },
      };

      for (let i = 1; i < formattedData.getNumberOfColumns(); i++) {
        const month = formattedData.getColumnLabel(i);
        chartOptions.series[i - 1] = {
          visibleInLegend: !!this.props.data,
          labelInLegend: month,
        };
      }

      return (
        <div>
          <Chart
            chartType="ColumnChart"
            width="100%"
            height="300px"
            data={formattedData}
            options={chartOptions}
          />
        </div>
      );
    } catch (e) {
      console.error("图表渲染错误：", e);
      return null;
    }
  }
}

export default BarChart;

方法二：仅格式化工具提示（保持坐标轴不变） #

如果只需要工具提示显示印度计数系统的数字，而坐标轴保持原有格式，可以通过添加tooltip角色的列实现自定义工具提示内容。

修改后的组件代码：

import React from "react";
import { Chart } from "react-google-charts";

class BarChart extends React.Component {
  convertDataToChartData = (data) => {
    const modified_data = {};
    if (!data) {
      modified_data[""] = 0;
    } else {
      data.forEach((value) => {
        modified_data[value.x] = Number(value.y) ?? value.y;
      });
    }

    const months = Object.keys(modified_data);
    const chartData = [["Month"]];

    months.forEach(month => {
      chartData[0].push(month);
      chartData[0].push({ role: "tooltip", type: "string" });
    });

    for (let i = 0; i < months.length; i++) {
      const month = months[i];
      const value = modified_data[month];
      const column = [month];

      for (let j = 0; j < months.length; j++) {
        if (j === i) {
          column.push(value);
          const formattedValue = new Intl.NumberFormat("en-IN").format(value);
          column.push(`${month}: ${formattedValue}`);
        } else {
          column.push(0);
          column.push("");
        }
      }

      chartData.push(column);
    }
    return chartData;
  };

  render() {
    try {
      const { data, ishorizontal, Haxis, Vaxis, legendposition } = this.props;
      const chartData = this.convertDataToChartData(data);

      const chartOptions = {
        hAxis: { title: Haxis },
        vAxis: { title: Vaxis },
        legend: { position: legendposition },
        isStacked: true,
        series: {},
        orientation: ishorizontal ? "horizontal" : "vertical",
        animation: {
          startup: true,
          easing: "linear",
          duration: 300,
        },
      };

      for (let i = 1; i < chartData[0].length; i += 2) {
        const month = chartData[0][i];
        chartOptions.series[(i - 1) / 2] = {
          visibleInLegend: !!data,
          labelInLegend: month,
        };
      }

      return (
        <div>
          <Chart
            chartType="ColumnChart"
            width="100%"
            height="300px"
            data={chartData}
            options={chartOptions}
          />
        </div>
      );
    } catch (e) {
      console.error("图表渲染错误：", e);
      return null;
    }
  }
}

export default BarChart;

关键说明： #

• 方法一依赖Google Charts的格式化能力，确保图表整体格式统一。
• 方法二使用浏览器原生Intl.NumberFormat API，灵活控制工具提示内容，不影响坐标轴显示。
• 两种方法均支持印度计数系统的标准格式（如1,23,456、10,00,000等）。

内容的提问来源于stack exchange，提问作者Gowtham Devenderan