キャンバスの線グラフのxAxisのラベルを隠すHtml5

Question

私は折れ線グラフを実装しています。折れ線グラフからx'Axisラベルを隠したいと思います。 scaleFontSize：0、、x'AxisおよびY'axisラベルはhideです。しかし、私は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の1つのリンクを見たことがありますRemove x-axis label/text in chart.js。しかし、まだ私は修正することができません。非表示にするには、[]（非表示のx軸のグリッド線）、または$scope.myNewChart.scale.xLabels.map(e => '')（番組のx軸のグリッド線） - おかげ

Answer 1

あなたは空の配列に、あなたのチャート（インスタンス）のscale.xLabelsプロパティを設定する必要があります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>