使用指南：Highcharts JavaScript图表库基础应用

需积分: 10 59 浏览量更新于2024-09-10 收藏 1.1MB DOC 举报

"Highcharts基本使用手册(中文API).doc" Highcharts是一款基于JavaScript的图表库，用于在网页中创建各种动态、交互式的图表。它与Java的jfreechart类似，提供图表绘制和图像导出打印等功能。Highcharts的易用性在于只需要合理组织数据并在页面加载完成后将数据应用到图表组件中。首先，使用Highcharts的步骤通常包括以下几个部分： 1. 下载所需资源：访问官方网站www.highcharts.com下载最新版本的Highcharts-2.1.3.zip包，同时获取jQuery库，例如jQuery-min-1.4.2.js。这两个文件可以从官方指定的下载地址或第三方源获取。 2. 引入JS文件：在HTML文件的`<head>`标签内，引入jQuery库以及Highcharts的相关JS文件。例如： - 引入jQuery：`<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>` - 引入Highcharts核心文件：`<script type="text/javascript" src="../js/highcharts.js"></script>` - 引入导出图片功能的模块：`<script type="text/javascript" src="../js/modules/exporting.js"></script>` 3. 编写JS代码：在引入的JS文件之后，编写初始化图表的代码。在文档加载完成（`$(document).ready()`）时，创建一个新的Highcharts.Chart对象，定义图表的配置参数，如容器ID（`renderTo: 'container'`）、默认系列等。以下是一个基础的示例代码： ```javascript <script type="text/javascript"> var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'line' }, title: { text: '图表标题' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: '值轴标题' } }, series: [{ name: '数据系列1', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] }] }); }); </script> ``` 在上述代码中，`chart`变量存储了创建的图表对象，`renderTo`属性指定了图表渲染的目标元素（通常是具有id的div），`title`和`xAxis`、`yAxis`定义了图表的标题和坐标轴，`series`数组则包含了数据系列及其对应的数值。 Highcharts支持多种类型的图表，如折线图、柱状图、饼图、散点图、面积图等，通过调整`defaultSeriesType`或其他相关配置可以轻松切换图表类型。此外，`Highcharts.Chart`的配置对象还包含许多其他高级特性，如数据加载、工具提示、图例、缩放、导出等，这些都可以根据具体需求进行定制。为了进一步学习和实践Highcharts，可以参考官网上的例子，特别是那些以“basic”命名的文件，它们通常展示了最基础的用法。通过不断探索和实践，你可以熟练掌握Highcharts，为你的网站或应用创建丰富的可视化效果。

});

</script>

第四步：准备存放图片的容器

在<body> 标签中加入：

运行下试试。

这样就完成了一个最基本的曲线图的例子。

接下来的是如果我们要自己实现一个该怎么弄？

很简单，修改例子代码就可以了，用不着自己重新写代码。

1.先对比刚才写的例子的代码和效果，看看那些东西我们可以修改：

很明显，标题的文字、纵轴的单位，横轴的文字，这些都要修改，数据部分先不管。

于是，在 html 文件中，修改标题为：我的标题

修改代码为：

title: {

text: '我的标题',

x: -20 //center

保存再打开 html，我自己在试验的使用用的是 ultraEdit 编辑器编辑的 html 文件，发现文件里面的摄氏度出现乱码，

当时没在意，用 firefox 查看源文件，把摄氏度这个符号给 copy 过来了，保存后打开时没出现效果。

然后查看源文件的时候出现乱码，应该是编辑器把文件的编码修改了，所以在改的时候最好用记事本，保存时，

保存为 utf-8 编码的。或者干脆放在我们的开发工具中修改。

剩余11页未读，继续阅读

左手no戒指

粉丝: 0

使用指南：Highcharts JavaScript图表库基础应用

highcharts中文帮助文档

highcharts汉化js

highcharts中文API

highcharts-custom-events在vue中使用，都需要引入什么

vue2项目中安装了highcharts-vue后，3d效果图出来还是2D的效果是什么原因

highcharts-vue

highcharts-vue 自定义按钮

vue highcharts 3d饼图

react如何导入highcharts的zhcn.js模块?

什么是highcharts-gantt？

最新资源