问放大峡谷条形图，按一下按钮

EN

  <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>