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]        

}]