Highcharts让数据可视化更简单 : )

Highcharts由纯JavaScript编写，支持绝大部分现代浏览器，使用非常简单，功能非常强大。下面是一张示例图微信截图_20210606172400.png


引入 Highcharts

Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，以使用 CDN 文件为例，对应的代码是：

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

创建一个简单的图表

绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小。

<div id="container" style="width: 600px;height:660px;">loading...</div>

然后通过 Highcharts 的初始化函数 Highcharts.chart 来创建图表，该函数接受两个参数，第一个参数是 DOM 容器的 Id，第二个参数是图表配置，代码如下：

var options = {
            chart: {
                type: 'bar',
                style:{
                    fontSize:'16px',
                }                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                userHTML:true,
                text: '<a href="https://zijie.org" target="_blank">双色球-红蓝球出现次数统计</a>'  // 标题
            },
            subtitle:{
                text: '来自这里的鸡毛信'
            },
           
            xAxis: {
                categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24','25', '26', '27', '28', '29', '30', '31', '32', '33']
                  // x 轴分类
            },
            yAxis: {
                title: {
                    text: '出现次数'  // y 轴标题
                }
            },
            series: [{          // 数据列
                name: '红球',   // 数据列名
                data: [528,497,486,483,480,508,499,503,488,488,474,483,484,532,467,484,502,504,
  489,  506,  465,  522,  463,  447,  476,  526,  497,  445,  470,  484,  459,  516,  425]
   // 数据
            }, {
                name: '篮球',
                data: [178,  159,  167,  157,  161,  164,  177,  150,
  174,  160,  178,  183,  159,  171,  165,  177]
   // 数据

            }]
        };
        // 图表初始化函数
        //var chart = Highcharts.chart('container', options);//因为我们已经引用了jquery所以用下面的方式初始化
        $("#container").highcharts(options);

运行，就可以了。

期中series中红球和篮球的数据是分析自双色球入市以来红球和篮球开出的总频次。

从数据中可以看出来红球中的1，14，22，26开出频次是最高的，而篮球1，7，12，16的频次是最高的。呵呵。