工具/材料

Sublime Text

操作方法

• 01

  打卡Sublime Text，新建HTML5頁面，然后在頁面中插入jquery和highcharts的腳本文件，如下圖所示

  
• 02

  然后在body元素中定義放置柱形圖的p容器，如下圖所示，注意給p設(shè)置寬和高

  
• 03

  接下來在script中訂單柱狀圖的標(biāo)題，副標(biāo)題，X，Y坐標(biāo)軸的配置信息，如下圖所示

  
• 04

  然后就是準(zhǔn)備柱狀圖的數(shù)據(jù)了，如下圖所示，數(shù)據(jù)要和上面定義的X坐標(biāo)軸進行匹配

  
• 05

  接下來就是將所有準(zhǔn)備好的數(shù)據(jù)和參數(shù)配置都放在json中，如下圖所示，highcharts只接受json的傳參方式

  
• 06

  一切準(zhǔn)備好之后，下面你就可以調(diào)用highcharts方法，并且傳入所準(zhǔn)備的json串來生成柱狀圖，如下圖所示

  
• 07

  最后，運行頁面程序以后，你就可以看到自己定義的柱狀圖了，如下圖所示