使用自定义按钮放大CanvasJS

Question

我想使用canvasjs的缩放和平移功能，但是使用我自己的按钮（这样我可以控制它们的样式，位置......）。这可能吗？

Answer 1

看看这个！

＆＃13;

＆＃13;

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

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;