iphone - 如何在 iOS 的 UIWebView 上添加 Highcharts?

标签 iphone ios ipad highcharts

我是 HighCharts 的新手,我引用了示例 http://blog.li-labs.com/developing-ios-apps-with-custom-charting/并尝试了同样的方法,但在 iPad 模拟器上我得到了一个空白屏幕。

我已经提到了有关堆栈溢出的问题,但它仍然无法正常工作。 谁能告诉我哪里出错了。

编辑:我的 HTML 文件中的代码:

 <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
$(function () {

        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Browser market shares at a specific website, 2010'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        });
    });


        </script>
    </head>
    <body>
<!--<script src="../../js/highcharts.js"></script>-->
<!--<script src="../../js/modules/exporting.js"></script>-->

<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

How to add and use the Javascript libraries in XCode

Here is a simple view of how I handle the code and data within XCode.

  1. Download the Javascript reporting package from your preferd chart site. In my case: http://www.highcharts.com/download

  2. Add or import the files into XCode resources. (I suggest creating a group called JS).

  3. When adding a resource to XCode it will generally be marked as being needed to be compiled. Ensure that the files are not listed as being “Compiled”. The easiest way is to simply drag the files from Targets -> Your Project Name -> Compiled Sources into Targets -> Your Project Name -> Copy Bundle Resources.

  4. Create a test html file or simply import one from your HighChart (or any other javascript chart library) examples folder. In my case I name it hcpie.html

  5. Ensure that any file references in the tags do not recurse or move into any folder (even if they are in one in your project). e.g.

RIGHT =

WRONG =

  1. Create a UIWebView within Interface Designer and link it to your view (in my case I named it chart1). e.g.

@interface FirstViewController : UIViewController { IBOutlet UIWebView *chart1; }

@end

  1. Simply reference the HTML example file when loading.

    • (void)viewDidLoad {

NSString *pathOfFile = [[NSBundle mainBundle] pathForResource:@”hcpie” ofType:@”html”]; NSString *htmlText = [NSString stringWithContentsOfFile:pathOfFile encoding:NSUTF8StringEncoding error:nil];

NSURL *baseURL = [NSURL fileURLWithPath:pathOfFile];

[chart1 loadHTMLString: htmlText baseURL:baseURL];

[super viewDidLoad];

}

最佳答案

步骤:-

1) 首先只创建一个 html 文件并执行必要的代码,或者为了试用可以从包 http://www.highcharts.com/download 中获得的示例中复制 html 代码。

2) 确保 html 中的脚本应该有正确的 .js 链接 例如:- <script src="http://code.highcharts.com/highcharts.js"></script>

如果你想在本地给它你可以写<script src="highcharts.js"></script> 但请确保 .js 文件位于您的应用程序文件夹中。

3) NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"graph" ofType:@"html"];
   NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
   [obj loadHTMLString:htmlString baseURL:nil];  // Webview *obj;

希望对您有所帮助。在我的例子中它的工作。

关于iphone - 如何在 iOS 的 UIWebView 上添加 Highcharts?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16332328/

相关文章:

iphone - IOS:使用图案图像作为背景 - 内存泄漏

iphone - MGTwitterEngine 检查是否关注用户

iphone - 如何将 TableView Controller 的类型更改为常规 View Controller ?

iphone - 如何获取 iPhone 当前的网络速度?

javascript - 调试 - 查看 iPad 上触发了哪些事件

iphone - 如何将相同的 UIButton 添加到 iphone 中所有 View Controller 的导航栏?

iphone - 如何在 iPhone 中实现 Facebook 集成的社交框架?

iphone - 带有收件人显示名称和电子邮件地址的 MFMailComposeViewController

具有按比例填充的 subview 和固有宽度的 iOS StackView 的行为不符合预期

iOS 6.0.1 模拟器