2017-10-04 119 views
1

我使用Chart.js进行测试并尝试删除网格。我的代码:如何删除chart.js上的网格

function grafica(){ 
    var chartData = { 
     labels: [" ", " ", " "], 
     datasets: [ 
      { 
       fillColor: "#79D1CF", 
       strokeColor: "#79D1CF",//marges 
       data: [30, 40, 45] 
      }, { 
       fillColor: "rgb(210,27,71)", 
       strokeColor: "rgb(210,27,71)",//marges 
       data: [56, 55, 40] 
      }, { 
       fillColor: "rgba(210,27,71,0)", 
       strokeColor: "rgba(210,27,71,0)",//marges 
       data: [0, 0, 0] 
      } 
     ] 
    }; 
    var ctx = document.getElementById("myChart").getContext("2d"); 
    var myBar = new Chart(ctx).Bar(chartData, { 
     showTooltips: false, 
     onAnimationComplete: function() { 
      var ctx = this.chart.ctx; 
      ctx.font = this.scale.font; 
      ctx.fillStyle = this.scale.textColor; 
      ctx.textAlign = "center"; 
      ctx.textBaseline = "bottom"; 
     } 
    }); 
} 

我该怎么办?我尝试了一些东西,如添加“ctx.gridLines = false;”和“ctx.ticks = false;”,但此刻任何工作。

编辑: 我按照您的指示做了一些更改,但我不知道为什么会有任何工作。 我使用的版本是2.0.0-α

回答

1

我现在用的版本2.0Alpha,你一样。

Updated Documentation Link

下面是没有格线的简单条形图的例子。

您需要在选项对象的y和xAxis键上设置'gridLines'键。

window.onload = function() { 
 

 
    var ctx = document.getElementById("canvas").getContext("2d"); 
 

 
var barChartData = { 
 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
     datasets: [{ 
 
      label: 'Dataset 1', 
 
      backgroundColor: "rgba(151,187,205,0.5)", 
 
      data: [100,99,98,97,96,95,94] 
 
     }] 
 
    }; 
 
    
 
    window.myBar = new Chart(ctx).Bar({ 
 
     data: barChartData, 
 
     options: { 
 
      responsive: true, 
 
      scales: { 
 
      xAxes: [{ 
 
       gridLines: { 
 
       show: true 
 
       } 
 
      }], 
 
      yAxes: [{ 
 
       gridLines: { 
 
       show: false 
 
       } 
 
      }] 
 
      } 
 
     } 
 
    }); 
 

 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0-alpha/Chart.min.js"></script> 
 

 
<div> 
 
    <canvas id="canvas"></canvas> 
 
</div>

0

与尝试:

xAxis: { 
    gridLineWidth: 0     
}, 
yAxis: { 
    gridLineWidth: 0, 
    minorTickInterval: null 
} 

一下添加到图表数据,