Highcharts 中文社区

 找回密码
 立即注册

Highcharts 配置语法

2016-8-20 04:04| 发布者: 彭芳| 查看: 1427| 评论: 3

摘要: 本章节介绍使用 Highcharts 生成图表的一些配置。

Highcharts 配置语法

本章节介绍使用 Highcharts 生成图表的一些配置。

第一步:创建 HTML 页面

创建一个 HTML 页面,引入 jQuery 和 Highcharts 库:

文件名:Highcharts 配置语法


<html>
    <head>
    <meta charset="UTF-8" />
    <title>Highcharts 配置语法</title>
     <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js">
      <script src="http://code.highcharts.com/highcharts.js"></script>
      </head>
      <html>


实例中 id 为 container 的 div 用于包含 Highcharts 绘制的图表。

第二步: 创建配置文件

Highcharts 库使用 json 格式来配置。

$('#container').highcharts(json);

这里 json 表示使用 json 数据格式和 json 格式的配置来绘制图表。步骤如下:

标题

为图表配置标题:

var title = {
  text: '月平均气温'   
};

副标题

为图表配置副标题:

var subtitle = {
  text: 'www.hcharts.cn'
};

X 轴

配置要在 X 轴显示的项。

var xAxis = {
   categories: ['一月', '二月', '三月', '四月', '五月', '六月'
      ,'七月', '八月', '九月', '十月', '十一月', '十二月']
};

Y 轴

配置要在 Y 轴显示的项。

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

提示信息

配置提示信息:

var tooltip = {
   valueSuffix: '\xB0C'
}

展示方式

配置图表向右对齐:

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

数据

配置图表要展示的数据。每个系列是个数组,每一项在图片中都会生成一条曲线。

var series =  [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 
         26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
         24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 
         17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
         16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

第三步: 创建 json 数据

组合是由配置信息:

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
Step 4: Draw the chart
$('#container').highcharts(json);

实例

以下为完整的实例(Highcharts 配置语法):


<html>
    <head>
    <meta charset="UTF-8" />
        <title>Highcharts 配置语法</title>
            <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js">
                <script src="http://code.highcharts.com/highcharts.js">     </script>
                    </head>
                    <body>
                    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
                        <script language="JavaScript">
                            $(document).ready(function() {
                            var title = {
                                text: '月平均气温'
                            };
                            var subtitle = {
                                text: 'www.hcharts.cn'
                            };
                            var xAxis = {
                                categories: ['一月', '二月', '三月', '四月', '五月', '六月'
                                             ,'七月', '八月', '九月', '十月', '十一月', '十二月']
                            };
                            var yAxis = {
                                title: {
                                    text: '温度 (\xB0C)'
                                },
                                plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                                }]
                            };   
                            var tooltip = {
                                valueSuffix: '\xB0C'
                            }
                            var legend = {
                                layout: 'vertical',
                                align: 'right',
                                verticalAlign: 'middle',
                                borderWidth: 0
                            };
                            var series =  [
                                {
                                    name: 'Tokyo',
                                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                                           26.5, 23.3, 18.3, 13.9, 9.6]
                                }, 
                                {
                                    name: 'New York',
                                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
                                           24.1, 20.1, 14.1, 8.6, 2.5]
                                }, 
                                {
                                    name: 'Berlin',
                                    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                                           17.9, 14.3, 9.0, 3.9, 1.0]
                                }, 
                                {
                                    name: 'London',
                                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                                           16.6, 14.2, 10.3, 6.6, 4.8]
                                }
                            ];
                            var json = {};
                            json.title = title;
                            json.subtitle = subtitle;
                            json.xAxis = xAxis;
                            json.yAxis = yAxis;
                            json.tooltip = tooltip;
                            json.legend = legend;
                            json.series = series;
                            $('#container').highcharts(json);
                        });
</script>
    </body>
    </html>


以上实例输出结果为:


1

路过
3

雷人

握手
1

鲜花

鸡蛋

刚表态过的朋友 (5 人)

发表评论

最新评论

引用 猎风鹰 2016-10-8 20:41
想从数据库读取数据,然后呈现下面链接图中的这种既有折现又有柱形图的效果。真的是好难的问题!求大神指教。效果连接图:http://code.hcharts.cn/demos/hhhhDW
引用 猎风鹰 2016-10-8 20:01
你好,在吗大神。
想制作出既有柱形图也有折线图的那种图表,已搜索到该样式的代码,但是要从数据库中读取数据,请问在这个series部分该怎么写呢
series: [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
引用 简数科技 2016-8-22 22:44
尝试一下不可用。。。

查看全部评论(3)

返回顶部