本文目录一览：
- 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]
}]
