canvasjs中的后退按钮答案

【问题标题】：Zoom back button in canvasjscanvasjs中的后退按钮
【发布时间】：2016-05-16 18:12:36
【问题描述】：

有没有办法使用 jQuery 或普通 JS 在 canvasjs 中添加缩放后退按钮？

我正在尝试将它添加到右上角的附近，但我必须是做错事了。

是否可以使用滚轮放大和缩小？

这些是我想应用缩放按钮的图表：

【问题讨论】：

您应该在问题的inside 中包含相关代码，而不仅仅是链接到外部资源。
数据是从SQL数据库动态生成的，下次我会在问题中包含它。

标签： javascript jquery html canvas canvasjs

【解决方案1】：

到目前为止，库中不提供逐步缩小功能。您可以按照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){
							e.chart.options.viewportMinStack = [];
						  e.chart.options.viewportMaxStack = [];
        }
				if(e.trigger === "zoom"){
        	e.chart.options.viewportMinStack.push(e.axisX.viewportMinimum);
        	e.chart.options.viewportMaxStack.push(e.axisX.viewportMaximum);
          document.getElementById("button").style.visibility = "visible";
        }
        if(e.trigger === "reset"){
        	axisX.viewportMinimum = null;
          axisX.viewportMaximum = null;
          e.chart.render();
        	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(){
	var viewportMinStack = chart.options.viewportMinStack;
  var viewportMaxStack = chart.options.viewportMaxStack;
  //if(!chart.axisX){
  //		chart.axisX = {};
  //	}
  if(viewportMinStack.length>1){
      viewportMinStack.pop();
      viewportMaxStack.pop();
      axisX.viewportMinimum = viewportMinStack[viewportMinStack.length-1];
      axisX.viewportMaximum = viewportMaxStack[viewportMaxStack.length-1];
  	}
  else{
      axisX.viewportMinimum = null;
      axisX.viewportMaximum = null;
      document.getElementById("button").style.visibility = "hidden";
  	}
  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 事件通过滚轮实现放大和缩小。

【讨论】：

【解决方案2】：

您也可以调用chart._resetButton.click() 将图表重置为正常。

【讨论】：