js怎么图表在html中显示,如何创建网页图表？用highcharts完美解决

如果你正在寻找如何创建图表，那我们这篇文章就是为你准备的。我曾经在网上找了很多的资料，怎样去完美的解决创建图表的方案，让我惊喜的是发现了一个很好的很强悍的Javascript图表库：Javascript库，它主要包括两个部分：

主要的特性有：

兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；

对个人用户完全免费；

纯JS，无BS；

支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；

跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；

提示功能：鼠标移动到图表的某一点上有提示信息；

放大功能：选中图表部分放大，近距离观察图表；

易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；

时间轴：可以精确到毫秒；

我认为在现有的阶段来说，这是最好的方式来为用户表达图表信息了。今天就准备几个例子，分享给大家，一起来见证这精彩的时刻吧。先看看demo效果图，也一并提供Highcharts最新版下载，有需要的童鞋请猛击！

第一步：HTML

其实jQuery库，所以在顶部还是要引用jQuery库。在我们的附件里面，gray.js是自定义图表设计。你还可以看到其他的几个小文件：dark-blue.js，dark-green.js，grid.js和skies.js。他们都定义了不同的设计风格。你可以选择其中的一个js文件(本例中是引用了gray.js灰色风格)看不同的图表设计。最后一个文件：main.js这是个初始化代码文件。在我们的演示中提供了不同的图表，让我们看看最终的代码：

column

area

line

Spine

areaspline

第二步：CSS

现在的图标是没有任何的样式风格，我们需要给图表加上一些固定的宽度和按钮的样式：

css/main.css

.actions, .chart {

margin: 15px auto;

width: 820px;

}

button {

background: none repeat scroll 0 0 #E3E3E3;

border: 1px solid #BBBBBB;

border-radius: 3px 3px 3px 3px;

box-shadow: 0 0 1px 1px #F6F6F6 inset;

color: #333333;

font: bold 12px;

margin: 0 5px;

padding: 8px 0 9px;

text-align: center;

text-shadow: 0 1px 0 #FFFFFF;

width: 150px;

}

button:hover {

background: none repeat scroll 0 0 #D9D9D9;

box-shadow: 0 0 1px 1px #EAEAEA inset;

color: #222222;

cursor: pointer;

}

button:active {

background: none repeat scroll 0 0 #D0D0D0;

box-shadow: 0 0 1px 1px #E3E3E3 inset;

color: #000000;

}

第三步：JS

js/main.js

最后，让我们一起看看我们的初始化javascript代码：

// Change Chart type function

function ChangeChartType(chart, series, newType) {

newType = newType.toLowerCase();

for (var i = 0; i < series.length; i++) {

var srs = series[0];

try {

srs.chart.addSeries({

type: newType,

stack: srs.stack,

yaxis: srs.yaxis,

name: srs.name,

color: srs.color,

data: srs.options.data

},

false);

series[0].remove();

} catch (e) {

}

}

}

// Two charts definition

var chart1, chart2;

// Once DOM (document) is finished loading

$(document).ready(function() {

// First chart initialization

chart1 = new Highcharts.Chart({

chart: {

renderTo: 'chart_1',

type: 'column',

height: 350,

},

title: {

text: 'Tools developers plans to use to make html5 games (in %)'

},

xAxis: {

categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']

},

yAxis: {

title: {

text: 'Interviewed'

}

},

series: [{

name: 'Dev #1',

data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]

}, {

name: 'Dev #2',

data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]

}, {

name: 'Dev #3',

data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]

}]

});

// Second chart initialization (pie chart)

chart2 = new Highcharts.Chart({

chart: {

renderTo: 'chart_2',

plotBackgroundColor: null,

plotBorderWidth: null,

plotShadow: false,

height: 350,

},

title: {

text: 'Pie chart diagram for the first developer'

},

tooltip: {

pointFormat: '{point.percentage}%',

percentageDecimals: 1

},

plotOptions: {

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: false

},

showInLegend: true

}

},

series: [{

type: 'pie',

name: 'Dev #1',

data: [

['Processing.js', 5],

['Impact.js', 10],

['Other', 20],

['Ease.js', 22],

['Box2D.js', 25],

['WebGL', 28],

['DOM', 30],

['CSS', 40],

['Canvas', 80],

['Javascript', 90]

]

}]

});

// Switchers (of the Chart1 type) - onclick handler

$('.switcher').click(function () {

var newType = $(this).attr('id');

ChangeChartType(chart1, chart1.series, newType);

});

});

在一开始的时候我定义了一个函数：ChangeChartType，这个函数可以改变我们的图标类型，当我们点击按钮的时候，触发onClick事件，我们称之为ChangeChartType功能的ID属性的值传递到这个函数(如所需的图表类型的名称)。现在，请注意我们如何初始化Highcharts.Chart对象。我们定义了对象，就出现相对应的图标以及类型，当然我们也可以定义X轴和Y轴，更多的可以到官方网站去了解API参考文档。

今天就到这里。我希望这个非常强大的图表

译文：script-tutorials(本站在原文基础上增加内容补充)

分享自：jiawin

有关图表的更多资讯，请移步【图表专题】

相关图表产品推荐和更多服务，请联系【在线客服】

标签：JavaScript图表图表库jQuery图表开发图表解决方案图表控件highchartsJavaScript Charts

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com