Android的谷歌网页视图图表不工作 [英] Android Webview Google Charts not working

问题描述

我一直在寻找互联网和SO一个解决方案嵌入的WebView显示与谷歌，图表的网页。这个我至今一无所获。我不想使用图像API，也没有建立HTML，因为我无法访问所需的数据呈现图表。

I have been searching the internet and SO for a solution embedding a WebView displaying a webpage with google-charts. This far i have found nothing. I do not want use the image API nor building the html, as I can't access the needed data for rendering the chart.

有什么建议？

堆栈跟踪：

    09-29 12:26:34.158  29906-29906/xxxxxxxxxxxxxxx E/AndroidRuntime﹕ FATAL EXCEPTION: main
    java.lang.NullPointerException
            at xxxxxxxxxxxxxxx.MMStatisticsActivity.onCreateView(MMStatisticsActivity.java:32)
            at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:870)
            at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1080)
            at android.support.v4.app.BackStackRecord.run(BackStackRecord.java:622)
            at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1416)
            at android.support.v4.app.FragmentManagerImpl$1.run(FragmentManager.java:420)
            at android.os.Handler.handleCallback(Handler.java:615)
            at android.os.Handler.dispatchMessage(Handler.java:92)
            at android.os.Looper.loop(Looper.java:137)
            at android.app.ActivityThread.main(ActivityThread.java:4895)
            at java.lang.reflect.Method.invokeNative(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:511)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:994)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:761)
            at dalvik.system.NativeStart.main(Native Method)

code：

public class MMScheduleActivity extends Fragment {
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState){

        View view = inflater.inflate(R.layout.activity_schedule, container, false);
        WebView browser = (WebView) view.findViewById(R.id.schedule_webview);

        browser.getSettings().setJavaScriptEnabled(true);

        SharedPreferences sharedPref = getActivity().getSharedPreferences("preferences", Context.MODE_MULTI_PROCESS);
        int event_id = Integer.parseInt(sharedPref.getString(getString(R.string.event_id), "0"));

        if(event_id!=0){
            String url = "http://xxxxxx/page/stats/" + event_id + '/';
            Log.i("URL", url);
            browser.loadUrl(url);
        }
        return view;
    }
}

值得一提的是，我一个片段中加载web视图。

Worth mentioning is that I load the WebView within a Fragment.

推荐答案

我都表现出的WebView一个谷歌的图表，并没有发现它难。

I have shown a google chart in WebView, and didn't find it that difficult.

为您的HTML文件摘录：

Snippets for your html file:

//include google api js file
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

//a div for chart
<div id="my-chart">
</div>

从js文件摘录：

Snippets from js file:

// In case there is no network
// the google jsapi is not loaded causing the screen to go white and break the application
// Check if google object is not null
if(typeof(google) !== 'undefined')
{
    google.load('visualization', '1.0', {'packages':['corechart']});
}

//a separate function for drawing data. Just call it wherever you need to redraw the chart
function drawChart(chartData){
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Col1');
    data.addColumn('number', 'Col2');

    for (var i = 0; i < 5; i++)
    {
        ideasChart.data.addRow("data1", "data2");
    }

    chart = new google.visualization.ComboChart(document.getElementById('my-chart'));
    chart.draw(data, chartOptions);
}

//chartOptions to customize your chart, its text color, etc.

chartOptions = {
    chartType:"ComboChart",
    containerId:"visualization",
    stackSeries: true,
    isStacked : true,
    backgroundColor: '#242424',
    legend: 'none',
    tooltip:{
        trigger:'none'
    },
    enableInteractivity: false,
    colors : ['#6DB1E2','#FDCB34'],
    chartArea: {
        backgroundColor: {
            stroke: '#fff',
            strokeWidth: 1
        }
    },
    seriesDefaults: {

        rendererOptions: {
            barPadding: 0,
            barMargin: 10
        },
    },

    seriesType: "bars",     
    bar:
    {
        groupWidth:"80%"
    },

    viewWindowMode : {
        max: 'pretty'
    }
};

而在你的Andr​​oid的WebView，

And in your android WebView,

您将需要加载HTML文件如下：

you would need to load your html file as:

myWebView.loadUrl("file:///android_asset/www/index.html");

希望它帮助。您需要自定义您的chartOptions按您的要求。并参阅范例启动它。

编辑：

如果您有这表明谷歌图表的URL，那么只需在需要添加

If you have a URL which shows google charts, then you would simply need to add

myWebView.loadUrl(strLink);

在您的活动。

这篇关于Android的谷歌网页视图图表不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！