3
Я пытаюсь создать диаграмму, используя canvasjs.js.Масштабирование диаграммы холста canvasjs при нажатии кнопки
canvasjs.js встроенный обеспечивает масштабирование и панорамирование, перетаскивая мышь на панели, но мне нужно сделать масштабирование и панорамирование нажатием кнопки. Вот мой код, который я попытался создать диаграмму нажатием кнопки DrawGraph.
<div id="chartContainer" style="height: 250px; width: 100%; margin: auto; border:1px solid black;">
</div>
<button type="button" id="zoom-in" onclick="DrawGraph()">
DrawGraph</button>
<button onclick="Reset()">Reset</button>
<input type="button" value="+" onClick="zoomIn()"/>
<input type="button" value="-" onClick="zoomOut()"/>
<script>
function DrawGraph() {
var arr=[];
for(i=0;i<100;i++)
{
if(i%2==0)
{
arr.push({x:i,y:10,color:"red"})
}
else
{
arr.push({x:i,y:10,color:"blue"})
}
}
var chart = new CanvasJS.Chart("chartContainer",
{
zoomEnabled: true,
width: 760, //Sets the Canvas Width
height: 150, // Sets the Canvas Height
theme: "theme3", // Sets the Theme (we have theme-1.theme-2,theme-3)- Default theme-1
// X axis Grid Thickness and Inteval that Points Should Represents (ex: 0-3000)
axisX: {
gridThickness: 0.0,
labelFontSize: 0.1, // x-axis label
tickLength: 0.0, // separation between the labels
lineThickness: 1, // x-axis Line thickness
minimum: 0,
},
// Y axis Grid Thickness and Inteval that Points Should Represents (ex: 0-3000)
axisY: {
gridThickness: 0.0,
interval: 10,
labelFontSize: 0.1,
tickLength: 0.0,
lineColor: "white", // Line Color Y-axis
lineThickness: 0.1
},
toolTip:{
enabled: false,
},
dataPointMaxWidth: 5, // Setting maximum width of columns
// X and Y value settings
data: [
{
type: "column",
click: onClick,
// mouseover: onMouseover,
dataPoints: arr
}]
});
// Canvas Js
chart.render();
// chart.Reset();
function onClick(e) {
alert(e.dataSeries.type + ", dataPoint { x:" + e.dataPoint.x + ", y: " + e.dataPoint.y + " }");
}
}
</script>
ниже является jsfiddle: jsfiddle
любая помощь очень ценится. Спасибо заранее.