JavaScript图表库Highcharts入门教程（三）：创建你的第一个图表

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts现已更新至最新版本7.2.0，新版本添加了新的顶级选项-说明；几乎所有系列都增加了对多个色轴的支持；增加了高对比度光和高对比度 – 黑暗主题，与背景形成3：1对比度，并修复了一些之前存在的BUG，赶快下载试用吧~

重要推荐：

• 纯JavaScript编写的开源股票图表控件：Highstock

• 一个基于web项目创建地图的HTML5/JavaScript地图组件：Highmaps

Highcharts最新试用版

您的第一个图表

页中包含Highcharts之后，您就可以创建第一个图表了。

我们将从创建一个简单的条形图开始。

1、在您的 页中添加一个div。给它一个id并设置一个特定的宽度和高度，这将是图表的宽度和高度。

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

2、通过

在 页中的任何位置添加包含以下代码的JavaScript标签来初始化图表  。＃1中的div在构造函数中引用。

document.addEventListener('DOMContentLoaded', function () {        var myChart = Highcharts.chart('container', {            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]            }]        });    });

如果要插入股票图表，则有一个单独的构造方法，称为Highcharts.stockChart。在这些图表中，数据通常以单独的JavaScript数组提供，可以从单独的JavaScript文件中获取，也可以通过对服务器的XHR调用获取。

var chart1; // globally available    document.addEventListener('DOMContentLoaded', function() {        chart1 = Highcharts.stockChart('container', {            rangeSelector: {                selected: 1            },            series: [{                name: 'USD to EUR',                data: usdtoeur // predefined JavaScript array           }]       });      });

3、现在，您应该在 页上看到以下图表：

4、（可选）您可以将全局主题应用于图表。主题只是通过Highcharts.setOptions方法全局应用的一组选项。下载包带有四个预定义的主题。要从这些文件之一应用主题，请在包含highcharts.js文件之后直接添加主题：

<script type="text/javascript" src="/js/themes/gray.js"></script>

有关Highcharts中的选项或设置如何工作的更多详细信息，请参见后续教程如何设置选项。

=====================================================

想要购买Highcharts正版授权的朋友可以咨询官方客服。

标签：