用highcharts构造散点图

来源：互联网发布：天龙八部男的染发数据编辑：程序博客网时间：2024/06/03 16:42

由于项目的需要，我们想要了解观众对一部电影的评分是否与时间存在一定的关系，以此判断时间能否成为我们探讨一部电影口碑的要素，我们是否有必要关注时间。于是我接触到了highcharts，一个画图工具。虽然只是很单纯地接触，很简单地应用了一次，还是觉得有些东西值得做点记录，万一以后又要用到了呢。
这是highcharts各部分基本组成名称：
highcharts基本组成

highcharts的代码写在中，最后放在html框架中，保存为.html的文件，打开即可看到图片。
这是我最后的效果：
这里写图片描述
这是我最后的代码：

<!doctype html><html lang="en"><head>//highcharts的运行需要引入两个js文件，highcharts.js及js框架（主流jquery)  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> </script>  <script>$(function () { //注意这里的id（即container）必须与下面body的相同，说明这个图要放的位置                                                                                     $('#container').highcharts({                                                                     chart: {          //图表类型，有line spline等                                                                                    type: 'scatter',           //缩放配置                                                                          zoomType: 'xy'                                                                           },           //图表标题，如果不需要可以不写这一项或者直接设为空字符串                                                                                        title: {                                                                                         text: 'Score very with time'                                },                                                                                          // x轴的设置                                                                                          xAxis: {          //categories　x轴的坐标            categories:['1.16', '1.17', '1.18', '1.19', '1.20', '1.21', '1.22', '1.23', '1.24', '1.25', '1.26', '1.27', '1.28', '1.29', '1.31', '2.01', '2.02', '2.03', '2.04', '2.05', '2.06', '2.07', '2.08', '2.09', '2.10', '2.11', '2.12', '2.14', '2.15', '2.16', '2.17', '2.18', '2.19', '2.20', '2.21', '2.22', '2.23', '2.25', '2.26', '2.27', '3.03', '3.05', '3.12', '3.14', '3.16', '3.19', '3.21', '3.26', '4.04', '4.08', '4.11', '4.19', '4.20', '4.28', '4.30', '5.02', '5.03', '5.07', '5.09', '5.18', '5.19', '5.21', '5.27'],                                                                                              title: {                                                                                         enabled: true,                                                                               text: 'Time (month.day)' //x轴是时间轴                                                                     }                                                                    },          //y轴设置                                                                                         yAxis: {                                                                                         title: {                                                                                         text: 'Score' //y轴是分数轴                                                                     }                                                                                        },                                                                                           legend: {                                                                                        layout: 'vertical',                                                                          align: 'left',                                                                               verticalAlign: 'top',                                                                        x: 100,                                                                                      y: 70,                                                                                       floating: true,                                                                              backgroundColor: '#FFFFFF',                                                                  borderWidth: 1                                                                           },            //对于所有的图表都可以适用的配置参数，属于共有性质。        //里面的设置不是一下子能说清楚的那种，属于对图表更细致的设定如是否允许标记符的鼠标经过状态啊这些，不详讲～                                                                                       plotOptions: {                                                                                   scatter: {                                                                                       marker: {                                                                                        radius: 5,                                                                                   states: {                                                                                        hover: {                                                                                         enabled: true,                                                                               lineColor: 'rgb(100,100,100)'                                                            }                                                                                        }                                                                                        },                                                                                           states: {                                                                                        hover: {                                                                                         marker: {                                                                                        enabled: false                                                                           }                                                                                        }                                                                                        },                  //散点说明标签，即鼠标碰上去后会显示的内容                                                                                         tooltip: {                                                                                       headerFormat: '<b>{series.name}</b><br>',                                                    pointFormat: '{point.x}, {point.y} '                                                } //有点遗憾和不解的是,point.x最后显示的是计数，我不知道这里应该怎么设置，可以使显示的x是x轴的时间数                                                                            }                                                                                        },         //数据源配置，可以以(x,y)的形式把所有的数据都放在这里。也可以把x值写在上面的xAis                                                                                         series: [{                                                                                                                                                   color: 'rgba(119, 152, 191, .5)',                                                            data: [4.0, 6.0, 6.22, 5.8, 6.44, 5.75, 5.43, 6.55, 6.0, 5.25, 5.33, 4.0, 6.0, 8.0, 6.0, 7.0, 6.67, 6.0, 6.0, 5.5, 2.0, 6.0, 6.67, 4.0, 4.0, 6.0, 6.0, 7.0, 4.0, 6.0, 6.0, 5.0, 6.5, 6.0, 4.0, 6.5, 6.0, 6.0, 6.0, 2.0, 5.0, 8.0, 7.0, 6.0, 2.0, 3.0, 8.0, 6.0, 8.0, 5.0, 8.0, 6.0, 6.0, 6.0, 8.0, 6.0, 8.0, 8.0, 10.0, 6.0, 6.0, 6.0, 6.0]                                                   }]                                                                                       });                                                                                      });                                                                                                                       </script></head><body>  <div id="container" style="min-width:700px;height:400px"></div></body></html>

感觉highcharts是不错的画图工具，其学习方法应该同html等差不多，有一定的代码格式，但主要是记忆标签。但是要注意啊，由于没有专门的编译器，少个逗号括号什么的不报错却就出不了结果了，自己有很多次就是改了数据后没有加逗号所以出不了图＝＝。

0 0