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

Question

我正在实施折线图，我想在折线图中隐藏x＆＃39;轴标签。我推出 scaleFontSize：0，，比x＆＃39; Axis和Y＆＃39;轴标签是隐藏的。但我想只隐藏x＆＃39; 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＆＃39;轴标签。我在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>