关于metro app 中的chart

metro app对于chart的兼容性相当的不好（应当说ie吧），尽管声称支持html5，但当我利用visual studio 开发metro app的时候，仍旧有许多运行时错误与对象不识别，让人百思不得其解，求指教。

本人试验了4种chart，有sencha-touch的，有kendoUI的，有hichart的，有mijmo的.

先说说第一种，由于sencha touch的显示需要webkit组件，无奈放弃。

第二种，经试验也可以开发，如果遇到不安全动态添加的问题，参考本博客http://blog.csdn.net/xiaoguang44/article/details/7222663。

第三种，运行时错误。。。。。难道框架组件缺失吗。。。。。

第四种，成功了，显示效果如下：

还是有组件能够适应windows8的，ok，下面来说说添加chart的方法：

首先是chart的下载地址：http://wijmo.com/wijmo-charts-in-windows-8/

我们要做的只不过是选择一个example，将script的引用部分加在default.html的下方

    <!--wijmo --> 
    <script src="/js/wijmo/external/jquery-1.6.2.min.js" type="text/javascript"></script>   
    <script src="/js/wijmo/external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="/js/wijmo/external/globalize.min.js" type="text/javascript"></script>
    <script src="/js/wijmo/external/raphael.js" type="text/javascript"></script>
    <script src="/js/wijmo/wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
    <script src="/js/wijmo/wijmo/jquery.wijmo.wijlinechart.js" type="text/javascript"></script>

由于lz选的split布局的应用，因此在splitPage.html上添加内容：

    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <h3>
                Gamers Online</h3>
            <div id="wijlinechartDefault" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px; background: #242529;">
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                Reference: <a href="http://store.steampowered.com/stats/">http://store.steampowered.com/stats/</a>
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>

<p>The wijlinechart widget allows you to create customized line charts. The samples in this section highlight some of the unique features of the widget, and they will help you get started with wijlinechart widget.</p>

<p>The source in this sample will show you how to add a header to the chart; how to format the axes; how to add chart labels; and how to populate the chart with data.</p>
            </p>
        </div>
    </div>

最后在splitpage.js里添加映射chart的代码：（frameload函数中）

                    $("#wijlinechartDefault").wijlinechart({
                        header: {
                            visible: true,
                            text: "Concurrent Steam Users (most recent 48 hours)",
                            textStyle: {
                                fill: "#fafafa"
                            }
                        },
                        axis: {
                            y: {
                                labels: {
                                    style: {
                                        fill: "#7f7f7f",
                                        "font-size": "11pt"
                                    }
                                },
                                gridMajor: {
                                    style: { stroke: "#353539", "stroke-dasharray": "- " }
                                },
                                tickMajor: { position: "outside", style: { stroke: "#7f7f7f" } },
                                tickMinor: { position: "outside", style: { stroke: "#7f7f7f" } }
                            },
                            x: {
                                labels: {
                                    style: {
                                        fill: "#7f7f7f",
                                        "font-size": "11pt",
                                        rotation: -45
                                    }
                                },
                                tickMajor: { position: "outside", style: { stroke: "#7f7f7f" } }
                            }
                        },
                        showChartLabels: false,
                        hint: {
                            content: function () {
                                return this.data.lineSeries.label + '\n' +
                        this.x + '\n' + this.y + '';
                            },
                            contentStyle: {
                                "font-size": "10pt"
                            },
                            offsetY: -10
                        },
                        legend: {
                            visible: false
                        },
                        seriesList: [
                        {
                            label: "Steam",
                            legendEntry: true,
                            fitType: "spline",
                            data: {
                                x: [new Date('10/27/2010 11:48:00'), new Date('10/27/2010 13:47:00'), new Date('10/27/2010 15:46:00'), new Date('10/27/2010 17:45:00'), new Date('10/27/2010 19:44:00'), new Date('10/27/2010 21:43:00'), new Date('10/27/2010 23:41:00'), new Date('10/28/2010 1:40:00'), new Date('10/28/2010 3:39:00'), new Date('10/28/2010 5:38:00'), new Date('10/28/2010 7:37:00'), new Date('10/28/2010 9:36:00'), new Date('10/28/2010 11:35:00'), new Date('10/28/2010 13:34:00'), new Date('10/28/2010 15:33:00'), new Date('10/28/2010 17:32:00'), new Date('10/28/2010 19:31:00'), new Date('10/28/2010 21:30:00'), new Date('10/28/2010 23:38:00'), new Date('10/29/2010 1:27:00'), new Date('10/29/2010 3:26:00'), new Date('10/29/2010 5:25:00'), new Date('10/29/2010 7:24:00'), new Date('10/29/2010 9:23:00'), new Date('10/29/2010 11:22:00')],
                                y: [2665513, 2300921, 1663229, 1622528, 1472847, 1354026, 1348909, 1514946, 1746392, 2020481, 2312976, 2539210, 2657505, 2369938, 1869805, 1648695, 1529983, 1398148, 1389668, 1568134, 1787466, 2101460, 2090771, 2351994, 2537400]
                            },
                            markers: {
                                visible: true,
                                type: "circle"
                            }
                        }
                ],
                        seriesStyles: [
                        { stroke: "#ff9900", "stroke-width": "3" }
                ],
                        seriesHoverStyles: [
                        { "stroke-width": "4" }
                ]
                    });
                //});

如此我们便可将chart映射到metro app 应用上了。