个人中心
gpt4 book ai didi

javascript - canvasjs:是否有可能回到过去？

转载 作者：行者123 更新时间：2023-12-03 07:15:48 24 4
gpt4 key购买 nike

我正在尝试创建一个 dynamic chart in canvasjs 。如果数据点高于某个定义值，图表就会发生变化。我想知道您是否可以回到过去，以便可以滚动浏览动态图表。

亲切的问候，肯

最佳答案

您可以将 Jquery Slider 与 viewport 一起使用为了达成这个。这是两个例子

http://jsfiddle.net/canvasjs/ydu922wL/

http://jsfiddle.net/canvasjs/rt1kmfrj/ 

$(function () {

    // following things are used to customize
    
     // set true to start with dynamic update, false to start with 0
    var isDynamic = true;
	// set to increase or decrease viewport size
    var viewportSize = 10;
    // how frequent dataPoints to be updated
    var milliseconds = 1000;
    
    var dataPoints = [
        {y:10},
        {y:14},
        {y:0},
        {y:20},
        {y:14},
        {y:7}
    ];

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Live Data Scroll"
        },
         axisY:{
           gridThickness: 0,
         },
        data: [{
            type: "line",
            dataPoints: dataPoints
        }]
    });
    chart.render();
    
    var current = 0;
    var scrollPane = $( ".scroll-pane" );
    
    //while dynamic updating, number of datapoints to be visible
    var dynamicWidth = viewportSize-10;
    
    var updateChart = function () {
        chart.options.data[0].dataPoints.push({
            y: Math.random() * 10 + 5
        });
        
        if(!chart.options.axisX)
            chart.options.axisX={viewportMinimum:null, viewportMaximum:null};
        	
        	if(isDynamic){
                chart.options.axisX.viewportMinimum = current - dynamicWidth;
                chart.options.axisX.viewportMaximum = chart.options.axisX.viewportMinimum + viewportSize;
                $( ".scroll-bar" ).
                slider( "option", "value", chart.options.axisX.viewportMinimum + dynamicWidth);
            }else{
                chart.options.axisX.viewportMinimum = $( ".scroll-bar" ).slider( "option", "value" );
                chart.options.axisX.viewportMaximum = chart.options.axisX.viewportMinimum + viewportSize;
            }
        	$( ".scroll-bar" ).slider( "option", "max", current++ );
           
      		var newBarWidth = scrollPane.width() / current;   
              if(newBarWidth > 20){
                 scrollbar.find( ".ui-slider-handle" ).css({ 
                     width: newBarWidth,
                     "margin-left": -newBarWidth / 2
                 });
                 handleHelper.width( "" ).width( scrollbar.width() - newBarWidth );
              }
        	chart.render();
    };

    setInterval(function () {
        updateChart()
    }, milliseconds);

    var scrollbar = $( ".scroll-bar" ).slider({
        max:6,
        min:0,
      	slide: function( event, ui ) {
			isDynamic = (ui.value === (current-1)) ? true : false;
      	}
    });
 	
    var handleHelper = scrollbar.find( ".ui-slider-handle" )
     .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
     .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
    
    scrollPane.css( "overflow", "hidden" );
    scrollbar.find( ".ui-slider-handle" ).css({width: "102%"});
                
});
 .scroll-pane { width: 100%; float:left; }
  .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px;  }
  .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
  .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
  .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
  .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
  
<link type="text/css"  href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

<body>
    <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
            <div id="chartContainer" style="height: 400px; width: 100%;"></div>
          <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
            <div class="scroll-bar"></div>
          </div>
    </div>
</body>

$(function () {

    var dataPoints = [
        {y:10},
        {y:14},
        {y:0},
        {y:20},
        {y:14},
        {y:7}
    ];

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Live Data Scroll"
        },
         axisY:{
           gridThickness: 0,
         },
        data: [{
            type: "line",
            dataPoints: dataPoints
        }]
    });
    chart.render();
    
    var current = 0;
    
    var updateChart = function () {
        chart.options.data[0].dataPoints.push({
            y: Math.random() * 10 + 5
        });
        
        if(!chart.options.axisX)
            chart.options.axisX={viewportMinimum:null, viewportMaximum:null};

            chart.options.axisX.viewportMinimum = current++;
            chart.render();
    };

    setInterval(function () {
        updateChart()
    }, 500);


    $("#slider-range").slider({
        range: "max",
        min:0,
        value:10,
        slide: function (event, ui) {
            current = ui.value;
            $( "#slider-range" ).slider( "option", "max", dataPoints[dataPoints.length-1].x );
        	$( "#slider-range" ).slider(  "value", current );
       		$( "#slider-range" ).slider( "option", "min", 0 );
        }
    });

});
<link type="text/css"  href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

<body>
    <div id="chartContainer" style="height: 400px; width: 100%;"></div>
    <div id="slider-range" style="width:100%;"></div><br/><br/>
</body>

关于javascript - canvasjs:是否有可能回到过去？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36434223/

24 4 0
文章推荐： javascript - 如果使用 Angular 单击任何复选框，则将 ng-class 应用于父元素？
文章推荐： javascript - 在 Chrome 开发工具中隐藏 JavaScript 文件
文章推荐： javascript - 无法使 ng-repeat 与 Angular Material 一起工作
文章推荐： javascript - 渲染重构导致函数未定义
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com