点击按钮缩放canvasjs条形图

Zooming the canvasjs bar chart on button click

本文关键字:canvasjs 条形图 缩放 按钮      更新时间:2023-09-26

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

任何帮助都将不胜感激。提前谢谢。

您可以在axises上设置viewportMaximum和viewportMinimum值,并在v1.8(仍然是测试版)上渲染图表,但根据开发人员的说法,使用当前版本是不可能的。

Q: 此外,是否有对API进行缩放和平移的编程访问?所以我们可以实现快速缩放的缩放按钮,比如1周、1个月等等?

A: 到目前为止,还没有办法访问这些数据。但我正在考虑未来版本的API访问。

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

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