[MVC4] 透過GoogleChartTools實現ColumnChart

2013-04-23

1815
0
2013-04-25

透過載入Google Javascript API, 只需簡單設定資料陣列及外觀即可完成

STP1. VS2012>File>New>Project>ASP.NETMVC4WebApplication>MobileApplication

STP2. ~/Views/Home/Index.cshtml

透過載入Google Javascript API, 只需簡單設定資料陣列及外觀即可完成,更多屬性設定...

@{
    ViewBag.Title = "GoogleChartTools";
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>    
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['ErrCode', 'Qty'], ['ADFU1', 20], ['MBPW2', 19], ['ABCDE', 17], ['BLFU1', 16],
            ['LCVD3', 15], ['ADDK1', 11], ['CMFU3', 8], ['LCCR2', 7], ['QBLE1', 5], ['SPNS1', 2]]);
        var options = {
            title: 'PQC TOP 10 ErrCode',
            titleTextStyle: { fontSize: 20 },
            fontName: 'Calibri',
            fontSize: 10,
            series: { 0: { color: 'red', visibleInLegend: false } }
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('divBarChart'));
        chart.draw(data, options);
    }
</script>

<div id="divBarChart" ></div>

MVC4

回首頁