canvasjs：時間をずらすことは可能ですか？

dynamic chart in canvasjsを作成しようとしています。データポイントが定義された値を超えると、グラフが移動します。時間内に戻ることができるかどうかを知りたいので、動的グラフをスクロールすることができます。canvasjs：時間をずらすことは可能ですか？

敬具、ケン

出典

2016-04-05 Ken Vernaillen

あなたはこれを達成するためにviewportと一緒にjQueryのスライダーを使用することができます。ここで二つの例

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; 
 
\t // 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}; 
 
     \t 
 
     \t 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; 
 
      } 
 
     \t $(".scroll-bar").slider("option", "max", current++); 
 
      
 
     \t \t 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); 
 
       } 
 
     \t chart.render(); 
 
    }; 
 

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

 
    var scrollbar = $(".scroll-bar").slider({ 
 
     max:6, 
 
     min:0, 
 
     \t slide: function(event, ui) { 
 
\t \t \t isDynamic = (ui.value === (current-1)) ? true : false; 
 
     \t } 
 
    }); 
 
    \t 
 
    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); 
 
     \t $("#slider-range").slider( "value", current); 
 
     \t \t $("#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>

であります

出典

2016-04-07 14:21:00 Sanjoy

canvasjs：時間をずらすことは可能ですか？

答えて

関連する問題