Android Honeycomb Emulator 上的 Google 图表轴渲染问题

Question

我将发布对我的应用程序的更新以使用新的 JavaScript Google Charts API，并注意到针对 Google Image Charts API 的弃用警告。我遇到了轴标签的 JavaScript 问题，显然取决于 Android WebKit 的版本。我知道在 3.1 之前使用 Google Charts API 根本行不通，因为 Webkit 客户端缺乏 SVG 支持。

背景

该应用程序目前支持 Eclair（API 级别 7）向上，SVG 支持仅到达 Honeycomb MR1（API 级别 12）中内置的 WebKit 客户端。为了解决这种功能上的差异，我的代码使用了一个简单的 if-else 语句来检查 Android 版本，然后再决定使用哪个图表 API。

渲染问题

最好用图片来展示。请注意；

1. Android Honeycomb Emulator 上运行的 JavaScript 与 Jelly Bean 设备上运行的 JavaScript 相同。
2. 比较的是模拟器（不工作）和真实手机（工作）
3. JavaScript 正在利用内置 android.webkit.WebViewClient 从 WebView 中运行
4. 模拟器上的轴显示为[Object object]，但在真实设备上正确显示

图 1 - 在 Honeycomb 仿真器上发现不正确的轴标签。

图 2 - 在真实设备上找到的正确轴标记。

代码

如果没有“粘贴轰炸”的大量无关代码的问题，驱动垂直 (v) 轴命名的 JS 和 Java 位如下所述；

JavaScript

...
As part of the chart options...
...
// Vertical axis.
vAxis: {title: yAxisTitle.toString(),
        baselineColor: 'white',
        titleTextStyle: {color: 'gray'},
        textStyle: {color: 'gray'}, 
        gridlines: {color: 'gray'}
        }

yAxisTitle 已通过 Android WebView.addJavascriptInterface 注入其中；

Java

chart.addJavascriptInterface(String.format(getString(string.height_label), getUnits().getSymbol()), "yAxisTitle");

迄今为止的调查

从之前简单地遇到[Object object] 描述（我是 JS 世界的新手），我了解到我只是在 JavaScript 对象上执行一个 toString，这就是它的样子。但这是否意味着 Android 3.1 和 4.1 之间的 Java-JavaScript 注入发生了变化，这意味着通过 addJavascriptInterface 注入的数据类型现在被“记住”了，而以前没有？我应该将字符串序列化为 JSON 对象，还是对于传递（几乎）原始类型的内容来说太过分了？最后，我是否应该在 JS 端显式强制转换以强制用于诸如轴标签之类的项目的对象类型确实是字符串？想法表示赞赏。

Answer 1

我使用WebChromeClient 控制台记录了我在问题中描述的 inject and parse 方法的许多不同排列的结果。我发现该类型在不同版本的 Android 中并没有“丢失”，并且再多的强制转换或其他愚蠢行为也无法纠正所描述的情况。

代替该方法，我注入了一个描述轴标题的JSONObject，并在JS中解析了对象。见下文；

Java

final JSONObject axes = new JSONObject();
axes.put("yAxisTitle", String.format(getString(string.height_label), getUnits().getSymbol()));
axes.put("zAxisTitle", getString(string.period_label));
chart.addJavascriptInterface(axes, "axes");

JavaScript

vAxis: {title: chartAxes.yAxisTitle,
        baselineColor: 'white',
        titleTextStyle: {color: 'gray'},
        textStyle: {color: 'gray'}, 
        gridlines: {color: 'gray'}
       },

这适用于所有 Android 版本。经验教训 - 不要尝试没有 JSON 的 Java-JS 通信，即使数据类型是基本的 - 没有什么大惊喜。