HighCharts图表的呈现

news/2024/7/10 23:43:34 标签: jquery

HighCharts用法说明地址：Highcharts API 文档 | Highcharts

通过地址打开会出现新版，也可以切换到旧版，以上图是旧版，旧版有详细的备注更方便使用

大致的界面呈现上方提供的地址可以实现，在这个地方主要说明几个注意点

1.呈现的步骤

添加相关的js引用（highcharts.js）
在html页面用div装图表数据<div class="hchart hchart-md" id="chart-graph1" ></div>
获取数据（获取坐标轴xy的数据，获取呈现的图表数据

2.坐标轴上需要呈现次方的刻度，可以用

<span style='baseline-shift: sub'><span> 下

<span style='baseline-shift: super'><span> 上

进行设置，用y轴为例(以下只是一个例子，具体情况逻辑具体呈现)

 var yAxisObj = new Object();
 yAxisObj.labels = {
            formatter: function () {
                var sValue = Math.abs(this.value).toString();
                if (type == 2) {
                    return "<span  style='baseline-shift: sub'>10<span>" + this.value + "</span></span>";
//将10向下移
                }
                if (sValue.length < 5) {
                    return this.value
                };
                return this.value.toExponential();
//toExponential()将数据科学计数法写法（eg:2.1E+2）,
//括号里面写数值是保留几位小数（eg：写(0)则是2E+2）
            }
        };

3.针对图表进行图片下载

首先需要引入highcharts导出的js文件(exporting.js)

进行设置

 //导出的相关设置
        Highcharts.setOptions({
            // 所有语言文字相关配置都设置在 lang 里
            lang: {
                resetZoom: '重置',
                resetZoomTitle: '重置缩放比例',
                viewFullscreen: "全屏",
                printChart: "打印",
                contextButtonTitle: "图表导出菜单",
                downloadJPEG: "下载JPEG图片",
                downloadPDF: "下载PDF文件",
                downloadPNG: "下载PNG文件",
                downloadSVG: "下载SVG文件",
            }
        });
      
        var chartObj = $(domChart).highcharts({
            navigation: {  //出现导出图片的按钮
                buttonOptions: {
                    enabled: true,
                }
            },
        });

4.图表基本设置

var chartObj = $(domChart).highcharts({
            chart: {
                type: "line",
                borderWidth: 0,
                zoomType: 'xy',//缩放，还有只针对x,y轴的
                resetZoomButton: {
                    position: {
                        align: 'center' //设置 缩放后重置按钮的位置
                    }
                }
            },
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            tooltip: {
                enabled: true
            },
            xAxis: xAxisObj,//x轴的刻度数据 值是object类型
            yAxis: yAxisObj,//y轴的刻度数据 值是object类型
            series: showSeries,//呈现的图表的数据 值是object类型的数组
            navigation: { //导出按钮的呈现
                buttonOptions: {
                    enabled: true,
                }
            },
        });

5.图表数据得得设置，也是上方的showSeries的其中一组数据的格式

  var serieObj = new Object();
        //分解数据
        var linePoints = graphData.linePointList;
        var points = new Array();
        for (var i = 0; i < linePoints.length; i++) { 
//每个点的数据处理，设置颜色，图像，大小
        var point = {
                    x: parseFloat(linePoints[i].x),
                    y: parseFloat(linePoints[i].y),
                     marker: {//点的样式设置，具体情况具体呈现，也可不设置
                            symbol: 'square', //图形
                            lineColor: "#FF0000",//图形的颜色
                            fillColor: "#00FF00",//填充的颜色
                            radius: 6 //半径，也可说是大小
                        }
                };
                points.push(point);
        }
        //图形属性
        serieObj.type = "scatter";//类型，设置这个类型，可以在鼠标浮现的数据信息显示x: y:
        serieObj.turboThreshold = 0;
        serieObj.name = "";//名称
        serieObj.keys = ["x", "y"];
        serieObj.data = points;//数据值
        serieObj.color = "";//连接的线颜色
        serieObj.dashStyle = "";//连接的线性
        serieObj.lineWidth = "";//线的宽度
        //标记
        serieObj.marker = {
            symbol: "",  //
            radius: 0.5,       // 大小
            lineWidth:"",
            lineColor: "",//图形的颜色
            fillColor: "",//填充的颜色
            enabled: true
        };