Question

我遇到了问题。我需要在移动应用程序中使用highcharts。所以我决定使用网络视图。它在iOS和Android上都不起作用。

我有3个问题：

1）我试图在我的网络视图中启动简单的高脚椅演示。有些不对劲。我在下面的代码中做错了什么？我想问题是加载js脚本。

Web视图组件中的HTML代码如下：

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Script Tutorials" />
    <title>How to create active charts using Highcharts | Script Tutorials</title>

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

</head>
<body>
    <div id="chart_1" class="chart"></div>
    <script type='text/javascript'>
    $(document).ready(function() {

// First chart initialization
var chart1 = new Highcharts.Chart({
 chart: {
    renderTo: 'chart_1',
    type: 'area',
    height: 350,
 },
 title: {
    text: 'Tools developers plans to use to make html5 games (in %)'
 },
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
 },
 yAxis: {
    title: {
       text: 'Interviewed'
    }
 },
 series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
 }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
 }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
 }]
});

});</script>
</body>
</html>

我的component.ts正在启用这样的网络视图：

export class ChartComponent implements AfterViewInit {
    public webViewSrc: string = generateChartHtml();

    @ViewChild("myWebView") webViewRef: ElementRef;
    @ViewChild("labelResult") labelResultRef: ElementRef;

    ngAfterViewInit() {
        let webview: WebView = this.webViewRef.nativeElement;
        let label: Label = this.labelResultRef.nativeElement;
        label.text = "WebView is still loading...";

        webview.on(WebView.loadFinishedEvent, function (args: LoadEventData) {
            let message;
            if (!args.error) {
                message = "WebView finished loading of " + args.url;
            } else {
                message = "Error loading " + args.url + ": " + args.error;
            }

            label.text = message;
            console.log("WebView message - " + message);
        });
    }
}

PS：generateChartHtml函数很简单，只返回上面写的html代码

这是我的component.html：

<ActionBar title="chaaaRtT">
</ActionBar>

<StackLayout #container VerticalOptions="FillAndExpand" height="350" [ngClass]="{'isSigningUp' : !isLoggingIn}">
    <WebView  #myWebView [src]="webViewSrc"></WebView>
    <Label  #labelResult></Label>
</StackLayout>

tns - v3.0.1 angular - v4

我的第二个问题是：它与此问题1659有关。

2）如何在Web视图中通过html加载本地文件？

问题1659我的解决方案已经过时了。它没有提及iOS。并且它没有说当它试图加载css / js文件时html文件的根目录是什么。例如这里

<head>
   <link rel="stylesheet" href="/form.css"/>
</head>

最后一个：

3）它是否会尝试从机器的根目录加载form.css，或从某些本地＆＃39; root，即当前文件夹？

提前感谢您的帮助

Answer 1

解决方案： 1）iOS：App Transport Security has blocked a cleartext HTTP resource - 这将允许向任何域发出http请求。默认情况下，iOS本机脚本被禁用。

2）与任何网络应用程序相同

3）仅相对于您的webview html文件所在的文件夹

尝试在本机脚本Web视图中使用highcharts。不行

1 个答案: