簡體   English   中英

在HTML頁面中加載Swift變量

[英]Load a swift variable in HTML page

我正在開發一個快速的應用程序。 在其中一種視圖中,我正在使用圖表的amcharts 圖表應使用應從ViewController加載的動態值。 在這種情況下,在我的html文件中,我使用了var數據,它是一個JSON對象。 JSON將根據輸入不斷變化。 我想將此data變量從Viewcontroller.swift文件傳遞到html 我怎么做 ?? 是這樣還是其他更好的方式?

共享ViewController和html代碼。

ViewController.swift

import UIKit
class PyramidChartView: UIViewController,UIWebViewDelegate{

    @IBOutlet weak var webView: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let path1 = NSBundle.mainBundle().pathForResource("amcharts", ofType: "js")
        do {

            let htmlFile1 = try NSString(contentsOfFile: path1!, encoding: NSUTF8StringEncoding)
            webView.stringByEvaluatingJavaScriptFromString(htmlFile1 as String)

        }
        catch {

        }
        let path2 = NSBundle.mainBundle().pathForResource("funnel", ofType: "js")
        do {

            let htmlFile2 = try NSString(contentsOfFile: path2!, encoding: NSUTF8StringEncoding)
            webView.stringByEvaluatingJavaScriptFromString(htmlFile2 as String)


        }
        catch {

        }

        let path = NSBundle.mainBundle().pathForResource("pyramid", ofType: "html")
        do {
            let pyramidHtmlFile = try NSString(contentsOfFile: path!, encoding: NSUTF8StringEncoding)
            webView.loadHTMLString(pyramidHtmlFile as String, baseURL: nil)
        }
        catch {   
        }

    }

    override func viewWillAppear(animated: Bool) {
        webView.delegate = self
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

pyramid.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>amCharts examples</title>
            <link rel="stylesheet" href="style.css" type="text/css">
                <script type="text/javascript" src="document.json"></script>
                <script>

                    var chart;
                               var data = [
                                {
                                "title": "Ideas Implemented",
                                "value": 200
                                },
                                {
                                "title": "Ideas Under Review",
                                "value": 193
                                },
                                {
                                "title": "Ideas Rejected",
                                "value": 96
                                },
                                {
                                "title": "Ideas Approved",
                                "value": 72
                                },
                                {
                                "title": "Ideas Under Approval",
                                "value": 65
                                }
                                ];
                                var legendData =  {
                                    "enabled": true,
                                    "align": "left",
                                    "autoMargins": false,
                                    "autoMargins": true,
                                    "forceWidth": false,
                                    "equalWidths": false,
                                    "left": 100,
                                    "labelWidth": 0,
                                    "maxColumns": 4,
                                    "switchable": false,
                                    "valueWidth": 50
                                }
                AmCharts.ready(function () {

                               chart = new AmCharts.AmFunnelChart();
                               chart.rotate = false;
                               chart.align= "right";
                               chart.labelText="[[value]]",
                               chart.balloonText="<b>[[value]]</b>",
                               chart.balloon.fixedPosition = true;
                               chart.baseWidth="80%";
                               chart.height="100%";
                               chart.marginRight = 50;
                               chart.marginLeft = 5;
                               chart.fontSize = 8;
                               chart.labelEnabled = "false";
                               chart.titleField = "title";
                               chart.valueField = "value";
                               chart.startX = -500;
                               chart.dataProvider = data;
                               chart.depth3D = 100;
                               chart.angle = 30;
                               chart.outlineAlpha = 1;
                               chart.outlineThickness = 2;
                               chart.outlineColor = "#FFFFFF";

                               var legend = new AmCharts.AmLegend();
                               legend = new AmCharts.AmLegend();
                               legend.position = "bottom";
                               legend.fontSize = "10px";
                               legend.align = "left";
                               legend.markerType = "circle";
                               legend.valueText = "";
                               legend.markerSize = 7;
                               legend.marginLeft = 0;
                               legend.fontSize = 10;
                               legend.horizontalGap = 5;
                               legend.spacing = 5;
                               legend.verticalGap = 5;
                               legend.borderAlpha = 0.5;
                               legend.markerLabelGap = 5;
                               chart.addLegend(legend);

                               chart.write("chartdiv");


                               });
                    </script>
                <style>
                    #chartdiv
                    {
                        position: relative;
                        width: 320px;
                        height: 400px;

                    }

                #secondDiv{

                    height: 500px !important;
                    overflow: auto;
                    position: relative;
                    align: center;
                    markerSize: 2px;
                    maxColumns: 4;

                }
                </style>
                </head>

    <body>

        <div id="chartdiv"></div>

    </body>

    </html>

您的Java腳本出現問題

我測試了您的代碼,當我在Java編輯器上對其進行測試時,我的Java腳本內部出現了問題,實際上我在網絡視圖上加載了Java腳本,但是在我的代碼中什么也沒有顯示。我不知道Java腳本是否可以解決此問題。

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM