Highcharts使用教程（1）：制作简单图表-白红宇

Highcharts使用教程（1）：制作简单图表

阅读量：4693 次

发布时间：2019-06-09

本文共 1223 字，大约阅读时间需要 4 分钟。

今天我们要使用JavaScript图表制作简单的柱形图，我们已经安装好Highcharts，让我们开始制作图表吧。

步骤一

在网页中添加一个div。设置id，设置图表长、高。代码如下：

                         
<div id=
"container"
style=
"width:100%; height:400px;"
></div>
        
      

步骤二

添加JavaScript标签初始化图表，放在网页任何地方都可，继续下面的jQuery代码：

                         
$(
function
() { 
$(
'#container'
).highcharts({ 
chart: { 
type: 
'bar'
},
title: { 
text: 
'Fruit Consumption'
},
xAxis: { 
categories: [
'Apples'
, 
'Bananas'
, 
'Oranges'
]
},
yAxis: { 
title: { 
text: 
'Fruit eaten'
}
},
series: [{ 
name: 
'Jane'
,
data: [1, 0, 4]
}, { 
name: 
'John'
,
data: [5, 7, 3]
}]
});
});
        
      

上面的代码利用jQuey打开已准备好的代码文件，如果使用MooTools或者Prototype代替 $(function ()语法，会有一点不同。而且，Highcharts在这些框架中并不是一个插件。因此，需要使用 Highcharts.Chart constructor并定义 chart.renderTO进行选择。

MooTools

                         
window.addEvent(
'domready'
, 
function
() { 
var
chart1 = 
new
Highcharts.Chart({ 
chart: { 
renderTo: 
'container'
,
type: 
'bar'
...
});
        
      

Prototype

                         
document.observe(
"dom:loaded"
, 
function
() { 
var
chart1 = 
new
Highcharts.Chart({ 
chart: { 
renderTo: 
'container'
,
type: 
'bar'
...
});
        
      

如果你嵌入Stock chart，这里有一个单独的构造函数方法——Highcharts.StockChart。在这张图表中图表以在一个单独的JavaScript数组提供，即不来自单独的JavaScript文件也不来自Ajax调用服务器。

转载于:https://www.cnblogs.com/lgzoppa/p/3469316.html

你可能感兴趣的文章