HighCharts基本使用实例(入门)

HighCharts

摘要

HighCharts是眼下最为流行的图表插件,应用范围广泛,眼下支持曲线图、区域图、3D图、柱状图、饼图、散列图、混合图等，而且还支持一些拓展的特殊图表，如：仪表图、极地图、箱线图、瀑布图等。因工作中用到，所以在这里我仅仅做最主要的配置使用。
官方站点:www.highcharts.com,有兴趣的同学也能够去上面学习很多其它的内容。

使用

首先须要到下载安装包 - highcharts下载
解压，然后导入两个js文件，然后写代码。举个官网上最简单的样例：

<!doctype html><head>
  <meta charset="utf-8" />
  <script src="文件所在路径/jquery-1.8.3.js"></script>
  <script src="文件所在路径/highcharts.js"></script>
  <script>
    $(function () {
    $('#chart').highcharts({
        title: {
            text: 'xxx图表'//指定图表标题
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], //指定x轴标签
            labels : //定义x轴标签的样式
            {
                    rotation : -80 ,
                    fontStyle : 'italic',
                    style: {
                        fontSize:'',
                        fontFamily: '微软雅黑' 
                    }
            }
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'  //指定y轴标题
            }
        },
        tooltip: {
            valueSuffix: '°C'   //指定鼠标移动到某个点上的提示框单位
        },
        legend: {  //
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '温度',
            type:'column', //指定图表类型 为柱状图，默觉得折线图。
            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] //y轴数据
        }]
    });
});

  </script></head><body>
  <div id="chart" style="min-700px;height:400px"></div></body></html>

直接将以上代码粘贴到文件里，改动一下js路径，执行就能够。

还能够支持动态拓展，比方：动态添加y轴，动态改动标题等等。

//获取highcharts对象
chart = $('#chart').highcharts();

//
chart.addAxis({ 
    id: 'precipitation',
    title: {
        text: '降雨量'
    },
    lineWidth: 2,
    lineColor: '#08F',
    labels: {
        format: '{value} mm',
        style: {
            color: '#08F'
        }
    },
    opposite: true //在右边轴显示 ， 用于须要两边轴都须要显示的情况。
});
chart.addSeries({
    name: '降雨量',
    type: 'column',
    color: '#08F',
    yAxis: 'precipitation',
    data: precipitationDatas,
    tooltip: {
        valueSuffix: 'mm'
    }
});

//动态删除y轴。
chart.get("precipitation").remove();

这个就是执行起来的图。
OK，就到这里。