将xAxis上的标签隐藏在画布中的折线图中Html5

Question

我正在实施折线图，我想从折线图中隐藏x'Axis标签。我把scaleFontSize：0,，比x'Axis和Y'axis标签隐藏起来。但我只想隐藏x'Axis标签。

var lineOptions = { 
       ///Boolean - Whether grid lines are shown across the chart 
       scaleShowGridLines : true, 
       //String - Colour of the grid lines 
       scaleGridLineColor : "rgba(0,0,0,.05)", 
       //Number - Width of the grid lines 
       scaleGridLineWidth : 1, 
       //Boolean - Whether the line is curved between points 
       bezierCurve : true, 
       //Number - Tension of the bezier curve between points 
       bezierCurveTension : 0.4, 
       //Boolean - Whether to show a dot for each point 
       pointDot : true, 
       //Number - Radius of each point dot in pixels 
       pointDotRadius : 4, 
       //Number - Pixel width of point dot stroke 
       pointDotStrokeWidth : 1, 
       //Number - amount extra to add to the radius to cater for hit detection outside the drawn point 
       pointHitDetectionRadius : 20, 
       //Boolean - Whether to show a stroke for datasets 
       datasetStroke : true, 
       //Number - Pixel width of dataset stroke 
       datasetStrokeWidth : 2, 
       //Boolean - Whether to fill the dataset with a colour 
       datasetFill : true, 
       //Boolean - Re-draw chart on page resize 
       responsive: true, 
       //String - A legend template 
       legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 
      }; 
     var lineData = { 
     labels: data, 
     datasets: [ 
      {    
      pointHighlightStroke: "rgba(151,187,205,1)", 
      data: [] 
     } 

    ] 
}; 

     var getElement = document.getElementById("departuresChart2"); 
       var ctx = getElement.getContext("2d"); 
       $scope.myNewChart = new Chart(ctx).Line(lineData, lineOptions); 

我正在参照http://www.chartjs.org/docs/#line-chart-introduction。 我只想隐藏A'axis标签。我看到一个链接在stackoverflow Remove x-axis label/text in chart.js。但我仍然无法修复。由于

Answer 1

你有你的图表（实例）的scale.xLabels属性设置为空数组 - []（皮x轴网格线），或$scope.myNewChart.scale.xLabels.map(e => '')（中显示X轴网格线），隐藏x轴标签。

例

var lineOptions = { 
 
    //Boolean - Whether grid lines are shown across the chart 
 
    scaleShowGridLines: true, 
 
    //String - Colour of the grid lines 
 
    scaleGridLineColor: "rgba(0,0,0,.05)", 
 
    //Number - Width of the grid lines 
 
    scaleGridLineWidth: 1, 
 
    //Boolean - Whether the line is curved between points 
 
    bezierCurve: true, 
 
    //Number - Tension of the bezier curve between points 
 
    bezierCurveTension: 0.4, 
 
    //Boolean - Whether to show a dot for each point 
 
    pointDot: true, 
 
    //Number - Radius of each point dot in pixels 
 
    pointDotRadius: 4, 
 
    //Number - Pixel width of point dot stroke 
 
    pointDotStrokeWidth: 1, 
 
    //Number - amount extra to add to the radius to cater for hit detection outside the drawn point 
 
    pointHitDetectionRadius: 20, 
 
    //Boolean - Whether to show a stroke for datasets 
 
    datasetStroke: true, 
 
    //Number - Pixel width of dataset stroke 
 
    datasetStrokeWidth: 2, 
 
    //Boolean - Whether to fill the dataset with a colour 
 
    datasetFill: true, 
 
    //Boolean - Re-draw chart on page resize 
 
    responsive: true, 
 
    //String - A legend template 
 
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 
 
}; 
 
var lineData = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
     label: "My Second dataset", 
 
     fillColor: "rgba(151,187,205,0.2)", 
 
     strokeColor: "rgba(151,187,205,1)", 
 
     pointColor: "rgba(151,187,205,1)", 
 
     data: [28, 48, 40, 19, 86, 27, 90] 
 
    }] 
 
}; 
 

 
var getElement = document.getElementById("departuresChart2"); 
 
var ctx = getElement.getContext("2d"); 
 
myNewChart = new Chart(ctx).Line(lineData, lineOptions); 
 
myNewChart.scale.xLabels = []; //or set -> myNewChart.scale.xLabels.map(e => '');

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<canvas id="departuresChart2"></canvas>