Highcharts项目实战（二）

最新推荐文章于 2023-02-02 14:17:19 发布

配剑江湖Ra

最新推荐文章于 2023-02-02 14:17:19 发布

阅读量241

点赞数

分类专栏： Highcharts 文章标签： javascript

本文链接：https://blog.csdn.net/qq_38418687/article/details/103671019

版权

Highcharts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Highcharts

Highcharts 是一个用纯JavaScript编写的一个图表库，能够简单便捷的给web网站或者是web应用程序添加交互性的图表，而且最关键的是免费提供给个人学习、个人网站和非商业用途的使用。

HighCharts 特性

兼容性	支持所有主流浏览器和移动平台（android、iOS等）
多设备	支持多种设备，如手持设备、平板等
免费使用	供个人免费学习使用
配置简单	json 格式配置
动态	可以在图表生成后修改
多维	支持多维图表
配置提示工具	鼠标移动到图表的某一点上有提示信息
时间轴	精确到毫秒
导出	表格可导出为 PDF/ PNG/ JPG / SVG 格式
输出	网页输出图表
可变焦	选中图表部分放大，近距离观察图表
外部数据	从服务器载入动态数据
文字旋转	支持在任意方向的标签旋转

在学习过程中，我们可以发现正是因为Highcharts的这些特性才实现了Highcharts图表库的功能。同时基于这些特性，Highcharts支持近11种图表类型，包括曲线图、区域图、饼图、散点图、气泡图、动态图表、组合图表、3D 图、测量图、热点图和树状图(Treemap)

实战案例

上篇文章讲述了Highcharts的基本配置和使用步骤，现在我们再讲述一个实例以供参考。

导入highcharts.js、jquery-1.8.3.min.js和data.js文件。下载链接如下：
https://pan.baidu.com/s/1jmGVUU-cCJZlk4gV7oazVg
提取码：fmfy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
    <script type="text/javascript">
        $(function () {
            var chart = Highcharts.chart('container', {
                chart: {
                    //鼠标点击基准线
                    events :{
                        click: function(e) {
                            var renderer = this.renderer,
					           x = e.chartX;
                            if(this.myPlotLine) {
                                this.myPlotLine.destroy();
                            }
                            this.myPlotLine = renderer.path(['M', x, this.plotTop, x, this.plotHeight + this.plotTop])
                                .attr({                 //属性
                                    stroke: 'red',      //颜色
                                    zIndex: 6,	        //索引
                                    'stroke-width': 1   //宽度
                                })
                                .add();                 //添加
                        }
                    },
                    type: 'scatter'
                },
                series: [{
                    data: [[52093,75.8],[67328,86.2],[75374,91.1],[81056,90.1],[85883,83.0],[93224,81.8]]
                },{
                    data :[[52093,57.40],[67328,58.74],[75374,58.85],[81056,59.01],[85883,59.28],[93224,59.01]]
                },{
                    data :[]
                }]
            });
            var hasPlotLine = false,
                $button = $('#button');
        $('#button').click(function () {
            var a = $('#XPoint').val();
            var b = $('#YPoint').val();
            var c = Number(a);
            var d = Number(b);
            if (!hasPlotLine) {
                // 新增的点包含 x 和 y 值
                chart.series[2].addPoint([ c,d]);
            chart.xAxis[0].addPlotLine({           //在x轴上增加
                value:c,                           //在值为2的地方
                width:2,                           //标示线的宽度为2px
                color: '#000000',                  //标示线的颜色
                id: 'plot-line-1',                  //标示线的id，在删除该标示线的时候需要该id标示
                dashStyle:'longdashdot'
            });
                $button.html('删除标示线');
            } else {
                chart.xAxis[0].removePlotLine('plot-line-1');
                chart.series[2].data[0].remove();
                $button.html('新增标示线');
            }
            hasPlotLine = !hasPlotLine;

        });
        });
    </script>
</head>
<body>
<div id="container"></div>
<input type="number" id="XPoint" name="test1"  size="28">
<input type="number" id="YPoint" name="test2"  size="28">
<button id="button" class="autocompare" onclick="GetText()" >新增点</button>

</body>
</html>

上述代码使用了Highcharts的画布工具Renderer，绘图工具是可以直接操作Highcharts的渲染层来绘制基础图形，包括绘制圆形、矩形等。在这里我用来绘制标示线，另外绘图工具是支持链式调用，也就是在创建绘图工具之后的语句依次调用attr、css、add等。详细内容请点击此处文字

 		var a = $('#XPoint').val();
        var b = $('#YPoint').val();
        var c = Number(a);
        var d = Number(b);

这里是有坑的，因为不管是使用JavaScript的document.getElementById(）方法还是JQuery的$方法都是不能得到输入值的，因为获取的是一个Element对象，而在这里我们是取输入的数字。所以在获取Element对象之后还需要进行强转换下类型。
另外仔细观察代码会发现，我们使用了一个空的数据列data[]数组来接受输入的数字。在输入x，y坐标之后，使用chart.series[2].addPoint（）方法输入点，使用chart.xAxis[0].addPlotLine（）方法添加标示线，最后使用chart.series[2].data[0].remove()和chart.xAxis[0].removePlotLine(）方法分别对输入数据点和标示线进行删除操作。

总结

文章到此已经是告一段落了，不过还有很多可以改良的地方。比如说对数据进行json封装，使用数据库进行数据的动态交互功能等等。最后我有一个猜想和一个问题：运行上述代码你会发现输入点会随着数据列的增多而不太明显，如果用一个旋转90°的“L”来表示是不是会好些，“L”又能不能旋转270°呢，能不能让输入点和“L”标示线同时出现和消失呢。
此处例子仅供参考

配剑江湖Ra

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Highcharts项目实战（二）

HighchartsHighcharts 是一个用纯JavaScript编写的一个图表库，能够简单便捷的给web网站或者是web应用程序添加交互性的图表，而且最关键的是免费提供给个人学习、个人网站和非商业用途的使用。HighCharts 特性兼容性支持所有主流浏览器和移动平台（android、iOS等）多设备支持多种设备，如手持设备、平板等免费使用供个人免费学...
复制链接

扫一扫