zoukankan      html  css  js  c++  java
  • highchart柱状堆叠图动态数据请求

    $(function () {
    var options = {
    chart: {
    renderTo: 'indoor',
    type: 'column',
    },
    title: {
    text: '室内问题'
    },
    xAxis: {
    categories: ['MR弱覆盖楼宇', '高2无4', '2G高倒挂', '投诉', '保障需求', '市场需求'],
    labels: {
    rotation:0
    }
    },
    yAxis: {
    max: 1000,
    min: 0,
    title: {
    text: ''
    },
    stackLabels: {
    enabled: true,
    style: {
    fontWeight: 'bold',
    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    }
    }
    },
    legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
    },
    tooltip: {
    formatter: function () {
    return '<b>' + this.x + '</b><br/>' +
    this.series.name + ': ' + this.y + '<br/>' +
    'Total: ' + this.point.stackTotal;
    }
    },
    plotOptions: {
    column: {
    pointWidth:'30',
    stacking: 'normal',
    dataLabels: {
    enabled: true,
    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
    style: {
    textShadow: '0 0 3px black'
    }
    }
    }
    },
    series: [{
    name: '已提方案',
    data: [],
    color: '#FFA500'
    }, {
    name: '待提方案',
    data: [],
    color: '#228B22'
    }]
    };
    var newWithoutDemand =[];
    var newWithDemand =[];
    
    $.ajax({
    url: '/Public/StatIssueByBranch?BranchID=1&CellularTypeID=2',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
    for(var i=0;i<data.length;i++){ 
    newWithoutDemand.push(data[i].WithoutDemand);
    newWithDemand.push(data[i].WithDemand);
    } 
    console.log('###')
    var obj = newWithDemand;
    var obj1 = newWithoutDemand;
    options.series[0].data = obj;    
    options.series[1].data = obj1;
    
    
    console.log(obj)
    console.log(obj1)
    
    chart = new Highcharts.Chart(options);   //这里顶部chart
    
    
    
    },
    error: function () {
    console.log(error)
    }
    });
    });

     下面是我的公众号,大家可以关注一下,可以一起学习,一起进步:

  • 相关阅读:
    设计模式外观模式
    SQL Server高级查询
    电脑双屏下如何设置程序在第二屏幕运行
    Vistual Studio自带的计划任务功能
    SQL Server定时创建动态表
    访问网站出现空白页面的原因和解决方法
    微软老将Philip Su的离职信:回首12年职场生涯的心得和随笔
    SQL Server更改字段名
    刷新本页与父页的两条代码
    色彩感情
  • 原文地址:https://www.cnblogs.com/lxl0419/p/6561582.html
Copyright © 2011-2022 走看看