博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HighCharts基本用法
阅读量:5058 次
发布时间:2019-06-12

本文共 1632 字,大约阅读时间需要 5 分钟。

var options={

chart: {type: 'column',renderTo: 'ChartDesigner1'},//type :图表类型(柱状图,饼状图),renderTo :指向页面的div容器或图表控件
title: {text: '企业检验提交次数统计'}, //标题
subtitle:{text: ''},//子标题
credits: {enabled: false},//底部版权不显示
exporting:{enabled:false},//右上角导出图标不显示
tooltip: {},//鼠标移上去显示信息
xAxis: {categories: []},//X轴显示的数据
yAxis: { 

min: 0,       //Y轴最小值

title: {text: ''}    //Y轴单位信息 比如 分钟,秒,公里/小时
},
plotOptions: {
column: {
pointPadding: 0.1,
borderWidth: 0
}
},
legend: { //图例信息
layout: 'vertical', //水平对齐
align: 'right',     //右侧显示
verticalAlign: 'middle', //居中
},
series: [] //Y轴数据集合(数组类型)

}

//异步获取数据 返回 JSON串,动态给xAxis.categories和series动态赋值  值得注意的是:结果集必须是数组即用 push()方法赋值。

var $dataServiceProxy = this.context.injector.get('$dataServiceProxy');

$dataServiceProxy.invokeMethod(
"Genersoft.BA.Xbrl.XbrlReportView.ViewBIXPCompanyAndXbrl",
"selectJsonCompanyChart",
[NM],
$.proxy(function(result) {
var jsonData = eval("(" + result + ")");
for(var i=0,len=jsonData.length;i<len;i++){
var str0=jsonData[i].VALUES;
if(i==0){
var strXs=str0.split(',');
$.each(strXs, function(strXNo, strX) {
  options.xAxis.categories.push(strX);
});
}else{
var series = {
data: []
};
var strYs=str0.split(',');
$.each(strYs, function(strYNo, strY) {
if(strYNo==0){
  series.name=jsonData[i].NAME; //图例信息
}
  series.data.push(parseFloat(strY));//每个分类信息(X轴要显示的信息)
});
options.series.push(series);//把数组信息 赋值给 series对象中
}
}
var chart = new Highcharts.Chart(options);//页面动态赋值后,再次初始化后,图表才会显示出来。
}, this),
$.proxy(function(error) {
$.notify.error("加载图表数据失败!");
},
this)
);
var chart = new Highcharts.Chart(options);//页面加载时第一次初始化

转载于:https://www.cnblogs.com/wangyuru/p/3712365.html

你可能感兴趣的文章
mysqladmin
查看>>
解决 No Entity Framework provider found for the ADO.NET provider
查看>>
SVN服务器搭建和使用(三)(转载)
查看>>
Android 自定义View (三) 圆环交替 等待效果
查看>>
设置虚拟机虚拟机中fedora上网配置-bridge连接方式(图解)
查看>>
HEVC播放器出炉,迅雷看看支持H.265
查看>>
[置顶] Android仿人人客户端(v5.7.1)——人人授权访问界面
查看>>
Eclipse 调试的时候Tomcat报错启动不了
查看>>
【安卓5】高级控件——拖动条SeekBar
查看>>
ES6内置方法find 和 filter的区别在哪
查看>>
Android入门之文件系统操作(二)文件操作相关指令
查看>>
Android实现 ScrollView + ListView无滚动条滚动
查看>>
java学习笔记之String类
查看>>
UVA 11082 Matrix Decompressing 矩阵解压(最大流,经典)
查看>>
jdk从1.8降到jdk1.7失败
查看>>
一些关于IO流的问题
查看>>
mongo备份操作
查看>>
8 -- 深入使用Spring -- 3...1 Resource实现类InputStreamResource、ByteArrayResource
查看>>
硬件笔记之Thinkpad T470P更换2K屏幕
查看>>
一个关于vue+mysql+express的全栈项目(六)------ 聊天模型的设计
查看>>