• HighCharts基本用法


    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);//页面加载时第一次初始化

  • 相关阅读:
    重载
    两数之和
    求二叉树层序遍历
    最小的K的个数
    二分查找
    实现二叉树先序,中序,后序
    判断 链表中是否有环
    设计LRU缓存结构
    排序
    反转链条
  • 原文地址:https://www.cnblogs.com/wangyuru/p/3712365.html
Copyright © 2020-2023  润新知