半岛外围网上直营

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.js文件之后直接添加主题：

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

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

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

想要购买Highcharts正版授权的朋友可以。

更多精彩内容，敬请关注下方的微信公众号，及时获取产品最新资讯▼▼▼