在按钮单击时缩放 canvasjs 条形图答案

【问题标题】：Zooming the canvasjs bar chart on button click在按钮单击时缩放 canvasjs 条形图
【发布时间】：2015-10-28 20:26:17
【问题描述】：

我正在尝试使用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

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

【问题讨论】：

标签： javascript css html canvas

【解决方案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

【讨论】：