highchartsjs代碼的簡單介紹

本文目錄一覽：

• 1、Highcharts,測量圖gauge，如圖紅線處，想要三個這種小方塊，js要怎麼寫？在線等，可以追加分數。
• 2、如何使用Js HighCharts圖表插件
• 3、highcharts的X軸文本顯示在上面
• 4、如何利用HighCharts圖表插件顯示折線圖數據
• 5、我用highcharts編寫的代碼為什麼單獨放在html裏面顯示空白
• 6、js的highcharts使用

Highcharts,測量圖gauge，如圖紅線處，想要三個這種小方塊，js要怎麼寫？在線等，可以追加分數。

請問LZ是要在highcharts儀錶盤控件中再加入兩個相同的小方塊么？如果真是這樣，那無能為力，除非侵入到highcharts框架源碼中才可以做到渲染出三個相同小方塊。

如果只是單純的想做出那種圓角矩形方塊，用其他方式倒是也可以實現：

1.css渲染

var d = $(“div”);

d.css(“height”, “20px”);

d.css(“width”, “20px”);

d.css(“border”, “1px solid #000000”);

d.css(“border-radius”, “5px”);

$(“body”).append(d);

2.html5渲染

body

svg xmlns=”” version=”1.1″ height=”50″ width=”50″

rect x=”5″ y=”5″ rx=”5″ ry=”5″ width=”20″ height=”20″ style=”fill:rgb(255, 255, 255);stroke-width:1; stroke:black” /

/svg

/body

第二種渲染方法需要注意，IE不支持html5，需要引入額外的js來讓IE支持渲染html5

如何使用Js HighCharts圖表插件

1、JS資源文件引入，jQuery 是目前使用最廣泛的 JS 框架，無特殊說明，所用的環境及所有例子都是基於 jQuery 的

2、創建div容器，創建一個div，並指定div 的 id，高度和寬度，代碼如下

3、HighCharts程序編寫，如下

4、運行結果，如圖：

5

5、兼容性，Highcharts可以運行在任何現代瀏覽器，包括移動終端以及IE6

highcharts的X軸文本顯示在上面

方法如下：

在highCharts對象中加入如下代碼：

xAxis : {

opposite : true

}

在Axis（包括xAxis和yAxis）有一個屬性tickInterval，number類型，表示間隔，也就是間隔多少個值顯示，比如設置為5，則表示每隔5個值才顯示一個，在上面的基礎上，經過設置tickInterval值為5，效果如下：

!doctype html

html lang=”en”

head

meta charset=”utf-8″

script type=”text/javascript” src=””/script

script type=”text/javascript” src=””/script

script type=”text/javascript”

var options = {

chart: {

renderTo: ‘container’,

type:’spline’

},

xAxis: {

tickInterval: 5,

categories:[‘2013-08-01 00:00:00′,’2013-08-01 00:00:10′,’2013-08-01 00:00:20′,’2013-08-01 00:00:30′,’2013-08-01 00:00:40′,’2013-08-01 00:00:50′,’2013-08-01 00:01:00′,’2013-08-01 00:01:10′,’2013-08-01 00:01:20′,’2013-08-01 00:01:30′,’2013-08-01 00:01:40′,’2013-08-01 00:01:50′,’2013-08-01 00:02:00′,’2013-08-01 00:02:10′,’2013-08-01 00:02:20′,’2013-08-01 00:02:30′,’2013-08-01 00:02:40′,’2013-08-01 00:02:50′,’2013-08-01 00:03:00′,’2013-08-01 00:03:10′,’2013-08-01 00:03:20′,’2013-08-01 00:03:30′,’2013-08-01 00:03:40′,’2013-08-01 00:03:50′,’2013-08-01 00:04:00’],

labels:{

x:45,//調節x偏移

//y:-35,//調節y偏移

//rotation:25//調節傾斜角度偏移

}

},

series: [{

data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

}],

legend :{

align: ‘right’,

verticalAlign: ‘top’,

x: -10,

y: 50,

floating: true

}

};

$(document).ready(function(){

var chart = new Highcharts.Chart(options);

});

/script

/head

body

div id=”container”/div

/body

/html

如何利用HighCharts圖表插件顯示折線圖數據

第一步，新建靜態頁面line.html，引入HighCharts核心js文件

第二步，插入折線圖容器，設置折線圖寬度和高度

第三步，編寫生成HighCharts折線圖的js代碼

第四步，預覽該靜態頁面，查看折線圖效果

第五步，添加如下代碼

line:{

    dataLabels:{

    enabled:true

    }

    }

第六步，再次預覽該界面，可以看到圖形上點數據顯示出來了

我用highcharts編寫的代碼為什麼單獨放在html裏面顯示空白

看看控制台輸出的信息，官方已經給你指出了問題所在。

很明顯是因為你沒有引入highcharts/modules/map.js，這個文件才是處理你那一堆地理json信息的，裏面有一個Highcharts.map = {}，否則你定義再多都會提示Highcharts.map是undefined.

js的highcharts使用

highcharts對象的x軸如果為時間類型，則默認是時間遞增的，如果出現了像LZ描述的這種情況，個人建議如下操作：

在series中只保存數值，而x軸信息則放到categories中，代碼樣例如下：

xAxis: {

categories : [‘2014-02-08’, ‘2014-02-09’, ‘2014-02-10’, ‘2014-02-11’, ‘2014-02-12’],

type : ‘category’

},

series: [{

data: [5, 10, 15, 20, 25]        

}]