`
lingbing777
  • 浏览: 11456 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

highcharts 圆柱图实时刷新Y轴

阅读更多
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>
  <script type="text/javascript" src="http://static.hcharts.cn/jquery/jquery-2.0.2.min.js"></script>
  <script type="text/javascript" src="http://www.hcharts.cn/demo/js/highcharts.js"></script>
  <script type="text/javascript" src="http://www.hcharts.cn/demo/js/exporting.js"></script>

  <script type="text/javascript">
   $(function () {
    Highcharts.setOptions({
             global: {
                 useUTC: false
             }
          });
       var chart;
       $(document).ready(function() {
           var options = {
                chart: {
                   renderTo: 'container',
                   type: 'column',
                },
                title: {
                   text: '10000号实时监控系统'
                },
                subtitle: {
                   text: '话务预测分析'
                },
                xAxis: {
                   categories: [
                       'Jan',
                       'Feb',
                       'Mar',
                       'Apr',
                       'May',
                       'Jun',
                       'Jul',
                       'Aug',
                       'Sep',
                       'Oct',
                       'Nov',
                       'Dec'
                   ]
               },
               yAxis: {
                   min: 0,
                   title: {
                       text: '数值'
                   }
               },
               legend: {
                   layout: 'vertical',
                   backgroundColor: '#FFFFFF',
                   align: 'left',
                   verticalAlign: 'top',
                   x: 50,
                   y: 20,
                   floating: true,
                   shadow: true
               },
               tooltip: {
                   formatter: function() {
                       return '技能组:'+
                           this.x +'</br>值:'+ this.y +' 个';
                   }
               },
               credits: {
                      enabled: false
               },
               plotOptions: {
                  column: {
                       pointPadding: 0.2,
                       borderWidth: 0
                  }
               },
                series: [{
                   name: '排班量'
               }, {
                   name: '话务量'
               }, {
                    name: '接通量'
               }]
           };
       /*   
      var url = "www.baidu.com";
       $.ajax({
            url: url,
            type: "post",
            cache: false,
            dataType: "json",
            data: {},
            ifModified: false,
            success: function(result){
                   var paiBan = [];
                   var huaWu = [];
                   var jieTong = [];
                      jQuery.each(result, function(m, obj) {
 
                        paiBan.push(
                              parseInt(obj.value0)
                          );
                          huaWu.push(
                              parseInt(obj.value1)
                          );
                          jieTong.push(
                              parseInt(obj.value2)
                          );
                   });
  var  y = Math.random();
                options.series[0].data = y;
                options.series[1].data = y;
                options.series[2].data = y;
                chart = new Highcharts.Chart(options);
           }
        });*/
    setInterval(function(){
var arrays=[];
for( var i=0;i<10;i++)
{
   var  y = Math.random();
   arrays.push(y);
}

        options.series[0].data = arrays;
                options.series[1].data = arrays;
                options.series[2].data = arrays;
if(chart)
{
  chart.series[0].setData(arrays);
  chart.series[1].setData(arrays);
  chart.series[2].setData(arrays);

}else
{
   chart = new Highcharts.Chart(options);
}
               
},1000);
       });
  
   });
   window.returnValue='true';
  </script>
</head>
<body>

 
  <div id="container"
   style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
分享到:
评论

相关推荐

    折线、双Y轴、不交叉、highcharts、按照日期分割线

    在这个特定的场景中,我们关注的是如何使用Highcharts来绘制一个具有双Y轴的折线图,并且这两条折线不会交叉,同时根据日期设置分割线,而且要确保在旧版本的IE浏览器(如IE8)中也能正常工作。 首先,我们需要了解...

    Highcharts实时趋势图

    对于实时趋势图,x轴通常是时间戳,y轴是对应的时间序列数据。 6. **交互功能** 高级特性如点击事件、数据列的钻取(drilldown)和工具提示(tooltip)可以增加用户交互性。例如,当用户点击图表的某一部分时,...

    Highcharts实时流量趋势图

    Highcharts 实时流量趋势图 Highcharts 是一个功能强大且流行的图表库,能够生成各种类型的图表,如折线图、柱状图、饼图等。今天,我们将基于 Highcharts 库,实现一个实时流量趋势图的示例。 什么是实时流量趋势...

    双y轴统计图和条件查询

    在JavaScript中,实现双y轴统计图有多种库可供选择,如D3.js、Chart.js、Highcharts等。这些库提供了丰富的API和配置选项,让我们能够定制出满足需求的图表。 1. D3.js(Data-Driven Documents):这是一个强大的...

    highCharts 展示图片示例

    highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要...另外 怎么用highcharts 和 fusioncharts 画 雷达图 ,仪表图 ,会的 朋友 ,赐教一下!

    Highcharts 多个Y轴动态刷新数据的实现代码

    在本文中,我们将深入探讨如何使用Highcharts库创建一个具有多个Y轴并能动态刷新数据的图表。Highcharts是一款强大的JavaScript图表库,它允许开发者轻松地在网页上绘制各种类型的图表,如折线图、柱状图、饼图等。 ...

    Highcharts 导出图片

    Highcharts 导出图片,具体的图片导出的代码,带吗代码代码代码

    Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,如折线图、柱状图、饼图等。在这个"Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子"中,我们将...

    Highcharts实现图形报表

    在JavaScript代码中,我们创建一个Highcharts对象,并配置其属性,如标题、x轴和y轴的标签、数据系列、颜色、图表类型等。 对于“柱形对比图”,我们可以设置多个数据系列,每个系列代表一个待比较的项。Highcharts...

    highcharts导出图片的后台代码

    highcharts导出图片的后台代码,这样就不用从highcharts官网服务器上进行图片导出了,成了一个本地的服务器!

    highCharts-时序图

    在"时序图"这个场景中,HighCharts被用来展示实时更新的数据,就像心电图一样连续不断地展示时间序列信息。这种类型的图表对于监控动态变化的数据非常有用,比如在金融市场的股票价格跟踪、物联网设备的状态监测或者...

    highcharts 动态指定 x y数据

    Highcharts是一款强大的JavaScript...总之,Highcharts提供了灵活的方式来动态指定和更新X、Y轴数据,无论是静态数据还是实时数据,都能通过适当的方法实现。通过组合使用各种特性,可以构建出丰富且响应式的图表应用。

    Highcharts柱状图显示

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括柱状图、折线图、饼图等多种类型。在本案例中,我们聚焦于"Highcharts柱状图显示",特别是柱状图...

    处理highcharts导出图片出现中文乱码的问题

    总的来说,解决Highcharts导出图片中的中文乱码问题需要综合考虑前端的Highcharts配置、后端的服务器环境、中间可能涉及的代理服务以及所有环节的字符编码设置。通过仔细排查并尝试上述方法,应该能够成功解决这个...

    Highcharts 构建曲线图

    然后,在JavaScript中,我们创建一个Highcharts配置对象,定义图表的属性,如标题、X轴和Y轴的标签、数据系列等。例如,以下是一个简单的配置对象,用于创建一个曲线图: ```javascript var chartOptions = { ...

    highcharts实现雷达图效果

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的图表,包括柱状图、折线图、饼图以及我们关注的雷达图等。在Web应用中,雷达图常用于展示多维数据,每个轴代表一个特性或指标,数据点则...

    highcharts封装 刷新 重绘 方法代码

    在处理动态数据或者需要更新图表的情况下,我们可能需要对Highcharts进行刷新或重绘。本文将深入讲解Highcharts的封装、刷新和重绘方法,并提供相关代码示例。 ### 1. Highcharts的封装 封装Highcharts是为了更好...

    highcharts曲线图,饼状图

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括曲线图和饼状图。这个库以其简洁的API、强大的自定义能力和跨浏览器兼容性而受到欢迎。在本文中,...

    highcharts 导出图片 例子 .net C# Demo

    HighCharts导出图片是发现请求的是官网,于是找了一下,整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...

Global site tag (gtag.js) - Google Analytics