javascript - 单击按钮缩放 canvasjs 条形图

Question

我正在尝试使用 canvasjs.js 创建图表。

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

非常感谢任何帮助。提前致谢。

Answer 1

您可以在轴上设置 viewportMaximum 和 viewportMinimum 值并在 v1.8(仍为测试版)上呈现图表，但根据开发人员的说法，在当前版本中这是不可能的。

Q: Also Is there programmatic access to zoom and pan on the API? so we can implement zoom buttons for quick zooming, like 1 week, 1 month, etc?

A: As of now there isn’t a way to access this data. But am considering API access for future versions.

以下是有关 v1.8 的更多详细信息:http://canvasjs.com/blog/10/07/sync-multiple-chart-ranges-zoom-vertically

也许你可以考虑使用另一个图表库。 http://www.highcharts.com/stock/demo/basic-line