HTML5 Canvas結合RGraph插件制作柱狀圖

2024-09-05 12:19:05

字體：大中小

來源：轉載

供稿：網友

HTML5 Canvas結合RGraph插件（這里主要是RGraph.bar.js和RGraph.common.core.js），實現產品銷售情況柱狀圖，用圖表來顯示銷售業績，非常直觀，而且HTML5 Canvas自身的功能也比較強大，長遠點來說，HTML5必將普及。因此本代碼值得參考。代碼中的豐富注釋同時也是你學習HTML5技術的不錯參考。

<!DOCTYPE html><head><meta charset="UTF-8"><title>使用RGraph插件制作柱狀圖</title><script src="/jscss/demoimg/201401/RGraph.common.core.js"></script><script src="/jscss/demoimg/201401/RGraph.bar.js"></script><script>function window_onload(){    //繪制柱狀圖，指定數據    myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,    2500,2700,1400,2600]);   //指定統計圖標題    myGraph.Set('chart.title','某個年份常州第一百貨公司長虹彩電銷售圖');    //指定X軸標題    myGraph.Set('chart.title.xaxis','銷售月份');    //指定Y軸標題    myGraph.Set('chart.title.yaxis','銷售臺數');    //指定X軸的坐標軸文字    myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',    '11月','12月']);    //指定Y軸的坐標軸文字    myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);    //指定在坐標軸頂部繪制說明銷售數量的文字    myGraph.Set('chart.labels.above', true);    //指定網格自動與坐標軸單位對齊    myGraph.Set('chart.background.grid.autofit', true);    myGraph.Set('chart.background.grid.autofit.align', true);    //指定標簽文字所使用的空間尺寸    myGraph.Set('chart.gutter',65);    //繪制柱狀圖    myGraph.Draw();}</script></head><body onload="window_onload()"><h1>使用RGraph插件制作柱狀圖</h1><canvas id="myCanvas" width="700" height="400">     [您的瀏覽器不支持canvas元素]</canvas></body></html>

上一篇：HTML5多種動畫效果加載圖片

下一篇：html5練習代碼 Div圓角陰影菜單旋轉實例