React Native WebView集成ZingChart时%d显示NaN问题求助

我来帮你梳理下问题的根源和解决方案：

为什么会出现NaN？ #

你代码里的console.log('%d', ':data')是直接触发NaN的原因——这里的%d是JavaScript console.log的数字格式化占位符，而你传入的:data是字符串类型，不是数字，所以被强制转换成了NaN。这和ZingChart的令牌本身无关，只是你测试时误用了console的格式化语法。

正确使用ZingChart令牌的方案 #

要让ZingChart的%data-day正常工作，需要确保两点：ZingChart脚本正确加载、令牌在ZingChart的配置中被正确识别。下面是修改后的完整示例代码：

import React, { Component } from 'react';
import { View, WebView } from 'react-native';

export default class App extends Component {
  renderWeb = () => {
    return `
      <html>
        <head>
          <!-- 先加载ZingChart的官方脚本 -->
          <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        </head>
        <body>
          <!-- 给ZingChart准备渲染容器 -->
          <div id="zingChartContainer" style="width:100%;height:350px;"></div>
          <script>
            // 定义ZingChart的配置，这里直接使用%data-day令牌
            const chartConfig = {
              type: 'bar',
              series: [
                {
                  values: [23, 45, 32, 56, 48],
                  // 绑定自定义的day数据，供%data-day令牌调用
                  data: [
                    {day: '周一'}, {day: '周二'}, {day: '周三'}, {day: '周四'}, {day: '周五'}
                  ]
                }
              ],
              tooltip: {
                // 这里的%data-day会被ZingChart自动解析为对应数据项的day字段
                text: '日期：%data-day<br/>数值：%v'
              }
            };

            // 渲染图表
            zingchart.render({
              id: 'zingChartContainer',
              data: chartConfig
            });

            // 如果要测试%符号的输出，直接打印字符串即可，不要用console的%d占位符
            console.log('测试令牌字符串：%data-day');
          </script>
        </body>
      </html>
    `;
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <WebView source={{ html: this.renderWeb() }} />
      </View>
    );
  }
}

关键注意事项 #

1. 必须加载ZingChart脚本：没有引入ZingChart的核心库，令牌解析逻辑根本无法工作，这是基础前提。
2. 避免混淆console格式化占位符：不要用%d这类console专属的格式化符号去打印ZingChart令牌，直接输出完整字符串即可。
3. 正确绑定自定义数据：%data-day中的day对应你在series.data里定义的字段名，确保字段名完全匹配，ZingChart才能正确找到对应值。

如果数据来自React Native端 #

如果你的图表数据需要从React Native主应用传递到WebView，可以通过postMessage实现：

// 在React Native组件中
state = {
  chartData: [
    {day: '周一', value: 23},
    {day: '周二', value: 45},
    {day: '周三', value: 32}
  ]
};

componentDidMount() {
  // 向WebView发送数据
  this.webViewRef.postMessage(JSON.stringify(this.state.chartData));
}

renderWeb = () => {
  return `
    <html>
      <head>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      </head>
      <body>
        <div id="zingChartContainer" style="width:100%;height:350px;"></div>
        <script>
          window.addEventListener('message', (event) => {
            const chartData = JSON.parse(event.data);
            const chartConfig = {
              type: 'bar',
              series: [
                {
                  values: chartData.map(item => item.value),
                  data: chartData.map(item => ({day: item.day}))
                }
              ],
              tooltip: {
                text: '日期：%data-day<br/>数值：%v'
              }
            };
            zingchart.render({id: 'zingChartContainer', data: chartConfig});
          });
        </script>
      </body>
    </html>
  `;
};

render() {
  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={ref => this.webViewRef = ref}
        source={{ html: this.renderWeb() }}
      />
    </View>
  );
}

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