透過載入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>