工具/材料SublimeText
操作方法01、打卡SublimeText ， 新建HTML5頁(yè)面 ， 然后在頁(yè)面中插入jquery和highcharts的腳本文件，如下圖所示
02、然后在body元素中定義放置柱形圖的div容器，如下圖所示，注意給div設(shè)置寬和高
03、接下來(lái)在script中訂單柱狀圖的標(biāo)題，副標(biāo)題，X，Y坐標(biāo)軸的配置信息，如下圖所示
04、然后就是準(zhǔn)備柱狀圖的數(shù)據(jù)了，如下圖所示，數(shù)據(jù)要和上面定義的X坐標(biāo)軸進(jìn)行匹配
05、接下來(lái)就是將所有準(zhǔn)備好的數(shù)據(jù)和參數(shù)配置都放在json中，如下圖所示，highcharts只接受json的傳參方式
06、一切準(zhǔn)備好之后 ， 下面你就可以調(diào)用highcharts方法，并且傳入所準(zhǔn)備的json串來(lái)生成柱狀圖，如下圖所示
【如何用Highcharts制作柱形圖】07、最后，運(yùn)行頁(yè)面程序以后 ， 你就可以看到自己定義的柱狀圖了，如下圖所示
推薦閱讀
- 如何免費(fèi)將PDF轉(zhuǎn)換成Word文檔
- JQuery UI如何制作顏色動(dòng)畫(huà)
- 如何應(yīng)用Bootstrap的模態(tài)框
- 如何使用秀堂制作最簡(jiǎn)單的H5/微場(chǎng)景
- 如何對(duì)Oracle的用戶進(jìn)行管理
- 如何在mysql控制臺(tái)中查看數(shù)據(jù)庫(kù)表
- Angular如何應(yīng)用timeout服務(wù)
- Word 2010如何修改字符底紋
- 如何在word文檔中插入空白頁(yè)
- sql數(shù)據(jù)庫(kù)如何設(shè)置主鍵自增長(zhǎng)