使用自定義按鈕放大CanvasJS

Question

我想使用canvasjs的縮放和平移功能，但使用自己的按鈕（以便我可以控制它們的樣式，位置......）。這可能嗎？

Answer 1

看看這個！

var dataPoints = []; 
 
var y = 0; 
 
for (var i = 0; i < 100; i += 1) { 
 
\t y += (Math.random() * 10 - 5); 
 
    \t dataPoints.push({ 
 
    x: i - 100/2, 
 
    y: y     
 
    }); 
 
} 
 

 
var chart = new CanvasJS.Chart("chartContainer", 
 
{ 
 
\t \t title: { 
 
\t \t \t text: "Customized Zoom and Pan Buttons", 
 
\t \t \t horizontalAlign: "left" 
 

 
\t \t }, 
 
    zoomEnabled:true, 
 
\t \t data: [ 
 
\t \t { 
 
\t \t \t type: "spline", 
 
\t \t \t dataPoints: dataPoints 
 
\t \t } 
 
\t \t ] 
 
}); 
 
chart.render(); 
 

 
$('.canvasjs-chart-toolbar button:eq(0)').text('Pan').addClass('myButton').click(function() { 
 
\t \t if($(this).hasClass("clicked")) { 
 
     $(this).text("Pan"); 
 
     $(this).removeClass("clicked"); 
 
    } else { 
 
     $(this).text("Zoom"); 
 
     $(this).addClass("clicked"); 
 
    } \t 
 
\t }); 
 
$('.canvasjs-chart-toolbar button:eq(1)').text('Restore').addClass('myButton').click(function() { 
 
\t $('.canvasjs-chart-toolbar button:eq(0)').text('Pan').removeClass("clicked"); 
 
});

.myButton { 
 
\t background-color:#599bb3; 
 
\t -moz-border-radius:28px; 
 
\t -webkit-border-radius:28px; 
 
\t border-radius:28px; 
 
\t border:1px solid #000 !important; 
 
\t cursor:pointer; 
 
\t color:#ffffff; 
 
\t font-family:Arial; 
 
\t font-size:17px; 
 
\t padding:6px 20px !important; 
 
    margin-left: 3px !important; 
 
\t text-decoration:none; 
 
\t text-shadow:0px 1px 0px #2f6627; 
 
} 
 
.myButton:hover { 
 
\t background-color:#476e9e; 
 
}

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="chartContainer" style="height: 360px; width: 100%;"></div>