javascript - amcharts 在 Android web View 中不显示主题背景

标签 javascript android webview amcharts

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

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

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>";
}

}

以下是图表在屏幕上的显示方式。 enter image description here

预期结果是带有深色黑板背景的相同图表。

有谁知道为什么背景不进来吗?预先感谢您收到的任何帮助。

最佳答案

您的代码中有一个拼写错误:

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

应该改为:

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

此外,alpha 是一个数字参数。我强烈建议您将其作为编号提供。

我知道您不会在某些旧浏览器中显示它,这些浏览器可能会因此而失败,但保持 JavaScript 应用程序尽可能强类型是一个好主意。

关于javascript - amcharts 在 Android web View 中不显示主题背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30469781/

相关文章:

Android WebView 不加载本地 css 文件

javascript - 在 webview 中执行 JavaScript

javascript - 在 react 中将 ref 传递给父级

javascript - 在 Safari 中链接 .connect() 方法时获取 "undefined is not an object"

javascript - 那么函数没有定义

android - Kotlin 代码堆栈跟踪显示 Java 行号

java - React Native Amplify AWS 包与 firebase 冲突

java - 如何将文本逐行设置为多行编辑文本

javascript - 在 Axios 请求中使用 Promise

android - Eclipse 找不到 android.webkit.WebSettings.PluginState;