amcharts 未在 Android webview 中显示主题背景

Question

我正在使用 webview 在 android 应用程序中托管 amcharts。代码的基本设置是我以编程方式形成一个 HTML 文档并将其加载到我的资产文件夹中。 amcharts 库位于资产文件夹的子目录中。到目前为止，此设置允许我使用本地提供的数据在 Web 视图中生成图表。为了更改图表的主题，我一直在遵循来自 amcharts websight http://www.amcharts.com/tutorials/working-with-themes/ 的教程。本教程允许我更改图表中条形图的外观，但背景保持不变。我还查看了一些帖子，报告说其他用户的主题无法正常工作。我的问题的不同之处在于根据主题绘制图形的方式是正确的。只是背景没有设置。

这是我用来构建测试图表数据的class。

public class AmChartsUtils {

public static String getTestHtml(String chartData) {

    chartData = chartData.replace("\n", "");

    return "<HTML><HEAD>" + getHeadContent(chartData)+ "<BODY>"+ getBodyContent() + "</BODY></HTML>";
}

private static String getHeadContent(String chartData) {
    return "<script src=\"js/amcharts.js\" type=\"text/javascript\"></script>"+
    "<script src=\"js/serial.js\" type=\"text/javascript\"></script>" +
    "<script src=\"js/themes/dark.js\" type=\"text/javascript\"></script>" +
    "<script src=\"js/themes/chalk.js\" type=\"text/javascript\"></script>" +
//      "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\">" 
        getChartData(chartData);
}

private static String getChartData(String chartData) {

    StringBuilder sb = new StringBuilder();
    sb.append("<script type=\"text/javascript\">");

    sb.append("var chartData = [");
    sb.append(chartData);
    sb.append("];");
    sb.append(buildStartCommand());
    sb.append("</script>");


    return sb.toString();
}

private static String buildStartCommand() {
    StringBuilder sb = new StringBuilder();

    sb.append("if(document.body){");
    sb.append("document.body.style.backgroundColor = \"#282828\";");
//      sb.append("document.body.style.backgroundImage = \"url(\" + bgImage + \")\";");
    sb.append("}");
    sb.append("AmCharts.ready(function() {");

    sb.append("var chart = new AmCharts.AmSerialChart(AmCharts.themes.chalk);");
    sb.append("chart.dataProvider = chartData;");
    sb.append("chart.categoryField = \"country\";");
    sb.append("chart.angle = 30;");
    sb.append("chart.depth3D = 15;");
    sb.append("chart.backgroundColor = \"#282828\";");
    sb.append("chart.backgroundAloha = \"1.0\";");


    sb.append("var graph = new AmCharts.AmGraph();");
    sb.append("graph.valueField = \"visits\";");
    sb.append("graph.type = \"column\";");
    sb.append("chart.addGraph(graph);");

    sb.append("chart.write('chartdiv');");

    sb.append("});");
    return sb.toString(); 
}

private static String getBodyContent() {
    return "<div id=\"chartdiv\" style=\"width: 400px; height: 400px;\"></div>";
}

}

这是图表在屏幕上的显示方式。

预期结果是同一张图，黑板背景为深色。

有谁知道为什么后台进不去？提前感谢您收到的任何帮助。

Answer 1

您的代码中有错别字：

sb.append("chart.backgroundAloha = \"1.0\";");

应该这样读：

sb.append("chart.backgroundAlpha = \"1.0\";");

此外，alpha 是一个数字参数。我强烈建议您以数字形式提供。

我知道您不会在某些旧浏览器中显示它，这可能会因此而被抛弃，但最好让您的 JavaScript 应用程序尽可能强类型化。

amcharts 未在 Android webview 中显示主题背景

amcharts not showing theme background in Android webview

javascript

android

webview

amcharts