各种chart图分析

1.asp.net chart

 <asp:Chart ID="Chart1" runat="server"  DataSourceID="SqlDataSource1" Height="150px"
           Width="200px" align="center">
         <Series>
            <asp:Series Name="Series1" XValueMember="id"
                YValueMembers="parentid">
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
                <Area3DStyle Enable3D="True" />
            </asp:ChartArea>
        </ChartAreas>
        <BorderSkin SkinStyle="Emboss" />
    </asp:Chart>

 

 <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:SanHuaHVAC_Oracle %>"       
        SelectCommand="SELECT &quot;ID&quot;, &quot;TITLE&quot;, &quot;AUTOHEIGHT&quot;, &quot;AUTOLOAD&quot;, &quot;HTML&quot;, &quot;URL&quot;, &quot;PARENTID&quot; FROM &quot;TREE&quot; ORDER BY &quot;ID&quot;"
        ProviderName="<%$ ConnectionStrings:SanHuaHVAC_Oracle.ProviderName %>">
    </asp:SqlDataSource>

 

2.ext chart

var chart8 = new Ext.data.JsonStore({
                    fields: ['name', 'visits', 'views'],
                    data: [
            { name: 'Jul 07', visits: 245000, views: 3000000 },
            { name: 'Aug 07', visits: 240000, views: 3500000 },
            { name: 'Sep 07', visits: 355000, views: 4000000 },
            { name: 'Oct 07', visits: 375000, views: 4200000 },
            { name: 'Nov 07', visits: 490000, views: 4500000 },
            { name: 'Dec 07', visits: 495000, views: 5800000 },
            { name: 'Jan 08', visits: 520000, views: 6000000 },
            { name: 'Feb 08', visits: 620000, views: 7500000 }
        ]
                });

                new Ext.Panel({
                    title: '总用汽',
                    renderTo: 'exampleJ',
                    width: 475,
                    height: 180,
                    layout: 'fit',
                    items:
                    {
                        xtype: 'columnchart',
                        url: 'ext/resources/charts.swf',
                        store: chart8,
                        xField: 'name',
                        yField: 'visits',
                        listeners: {
                            itemclick: function (o) {
                                var rec = chart8.getAt(o.index);
                                Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
                            }
                        }
                    }
                });

 

3.fusionchart

<script type='text/javascript' src='FusionCharts/Charts/FusionCharts.js'></script>

json格式:

function chartIt() {
         var chartJsonData = '{ "chart": { "caption": "空调系统用电比例", "numberprefix": "$", "showborder": "0", "imagesave": "1", "imagesaveurl": "" }, "data": [ { "label": "一月", "value": "25000" }, { "label": "二月", "value": "35000" }, { "label": "三月", "value": "42300" }, { "label": "四月", "value": "35300" }, { "label": "五月", "value": "31300" } ] }';
         var myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "473", "178", "0", "1");
      myChart.setJSONData(chartJsonData);
      myChart.render("exampleB");

}

xml格式:

var chartXMLData = "<chart caption='分项用电比例' subCaption=''>";
      chartXMLData += "<set label='1月' value='" + 5 + "' />";
      chartXMLData += "<set label='2月' value='" + 6 + "' />";
      chartXMLData += "<set label='3月' value='" + 7 + "' />";
      chartXMLData += "<set label='4月' value='" + 8 + "' />";
      chartXMLData += "<set label='5月' value='" + 9 + "' />";
      chartXMLData += "</chart>";

      myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "473", "178", "0", "1");
      myChart.setXMLData(chartXMLData);
      myChart.render("exampleC");