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（仍为测试版）上呈现图表，但根据开发人员的说法，当前版本是不可能的。

问：是否有程序化访问缩放和平移API？所以我们可以实现缩放按钮来快速缩放，比如1周，1个月等等？

答：截至目前，还没有办法访问这些数据。但我正在考虑未来版本的API访问。

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

也许您可以考虑使用其他图表库。 http://www.highcharts.com/stock/demo/basic-line

单击按钮缩放canvasjs条形图

1 个答案: