在canvasjs中縮放後退按鈕

有沒有方法在canvasjs中使用jQuery或普通JS添加縮放後退按鈕？
在canvasjs中縮放後退按鈕

我想在右上角附近添加它，但我必須是做錯了什麼。

或者是否可以用滾輪放大和縮小？

這些是我想要的變焦按鈕適用於圖形：

2016-05-16 Chips

你應該在你的問題中包含相關的代碼*，而不僅僅是鏈接到外部資源。 –

數據是從SQL數據庫動態生成的，下次我將它包含在問題中。 – Chips

截至目前縮小一步一步不可用在庫中。您可以按照example中所示的方法解決問題。

var axisX = {}; 
 
var limit = 1000; //increase number of dataPoints by increasing this 
 
document.getElementById("button").style.visibility = "hidden"; 
 
    var y = 0; 
 
    var data = []; var dataSeries = { type: "line" }; 
 
    var dataPoints = []; 
 
    for (var i = 0; i < limit; i += 1) { 
 
     y += (Math.random() * 10 - 5); 
 
     dataPoints.push({ 
 
      x: i - limit/2, 
 
      y: y 
 
      }); 
 
     } 
 
dataSeries.dataPoints = dataPoints; 
 
data.push(dataSeries); 
 
var chart = new CanvasJS.Chart("chartContainer", 
 
    { 
 
     zoomEnabled: true, 
 
     rangeChanged: function(e){ 
 
     if (!e.chart.options.viewportMinStack){ 
 
\t \t \t \t \t \t \t e.chart.options.viewportMinStack = []; 
 
\t \t \t \t \t \t e.chart.options.viewportMaxStack = []; 
 
     } 
 
\t \t \t \t if(e.trigger === "zoom"){ 
 
     \t e.chart.options.viewportMinStack.push(e.axisX.viewportMinimum); 
 
     \t e.chart.options.viewportMaxStack.push(e.axisX.viewportMaximum); 
 
      document.getElementById("button").style.visibility = "visible"; 
 
     } 
 
     if(e.trigger === "reset"){ 
 
     \t axisX.viewportMinimum = null; 
 
      axisX.viewportMaximum = null; 
 
      e.chart.render(); 
 
     \t e.chart.options.viewportMinStack=[]; 
 
     e.chart.options.viewportMinStack=[]; 
 
     document.getElementById("button").style.visibility = "hidden"; 
 
     } 
 
     }, 
 
     title:{ 
 
     text: "Zoom & Pan with Back button" 
 
     }, 
 
     axisX: axisX, 
 
     data: data, // random generator below 
 
    }); 
 
chart.render(); 
 

 

 
//Function for back button 
 
function back(){ 
 
\t var viewportMinStack = chart.options.viewportMinStack; 
 
    var viewportMaxStack = chart.options.viewportMaxStack; 
 
    //if(!chart.axisX){ 
 
    // \t \t chart.axisX = {}; 
 
    // \t } 
 
    if(viewportMinStack.length>1){ 
 
     viewportMinStack.pop(); 
 
     viewportMaxStack.pop(); 
 
     axisX.viewportMinimum = viewportMinStack[viewportMinStack.length-1]; 
 
     axisX.viewportMaximum = viewportMaxStack[viewportMaxStack.length-1]; 
 
    \t } 
 
    else{ 
 
     axisX.viewportMinimum = null; 
 
     axisX.viewportMaximum = null; 
 
     document.getElementById("button").style.visibility = "hidden"; 
 
    \t } 
 
    chart.render(); 
 
    } 
 
var button = document.getElementById("button"); 
 
button.addEventListener("click", back);

#button{ 
 
    background-color: Transparent; 
 
    background-repeat:no-repeat; 
 
    border: none; 
 
    cursor:pointer; 
 
    overflow: hidden;  
 
    position: absolute; 
 
    z-index: 100; 
 
    margin-left: 10px; 
 
} 
 
.btn-back { 
 
    display: inline-block; 
 
    position: absolute; 
 
    z-index: 1; 
 
    padding: 0 10px 0 30px; 
 
    line-height: 44px; 
 
    color: #000; 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    font-size: 12px; 
 
} 
 
.btn-back:before { 
 
    content: '';  
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    left: 20px; 
 
    right: 0; 
 
    height: 34px; 
 
    margin-top: 5px; 
 
    z-index: -1;  
 
    border: 1px solid #b3b3b3; 
 
    border-left-width: 0; 
 
    border-radius: 5px; 
 
    background: #d9d9d9; 
 
} 
 

 
.btn-back:after { 
 
    content: '';  
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    left: 11px; 
 
    height: 27px; 
 
    width: 26px; 
 
    top: 8px; 
 
    z-index: -2;  
 
    border: 1px solid #b3b3b3; 
 
    border-top: 0 transparent; 
 
    border-right: 0 transparent; 
 
    border-radius: 7px 5px 5px 7px; 
 
    background: #d9d9d9;  
 
    -webkit-transform: rotate(45deg); 
 
     -moz-transform: rotate(45deg); 
 
     -ms-transform: rotate(45deg); 
 
     -o-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
}

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 

 
<body> 
 
    <button class="btn-back" id="button">Back</button> 
 
    <div id="chartContainer" style="height: 360px; width: 100%;"></div> 
 
</body>

，如果需要，你可以進出使用viewportMinimum和viewportMaximum用JavaScript mousewheel事件沿滾輪實現變焦。

來源

2016-05-17 08:05:17 Sanjoy

在canvasjs中縮放後退按鈕

回答

相關問題