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