HighCharts图表的呈现 |
您所在的位置：网站首页 › 怎么设置图表数据标签 › HighCharts图表的呈现 |
HighCharts图表的呈现
|
HighCharts用法说明地址：Highcharts API 文档 | Highcharts
通过地址打开会出现新版，也可以切换到旧版，以上图是旧版，旧版有详细的备注更方便使用 大致的界面呈现上方提供的地址可以实现，在这个地方主要说明几个注意点 1.呈现的步骤 添加相关的js引用（highcharts.js）在html页面用div装图表数据获取数据（获取坐标轴xy的数据，获取呈现的图表数据2.坐标轴上需要呈现次方的刻度，可以用 下 上 进行设置，用y轴为例(以下只是一个例子，具体情况逻辑具体呈现) var yAxisObj = new Object(); yAxisObj.labels = { formatter: function () { var sValue = Math.abs(this.value).toString(); if (type == 2) { return "10" + this.value + ""; //将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 }; |
【本文地址】
今日新闻 |
推荐新闻 |