javascript - 在chartJs中禁用或隐藏图表的YAix

Question

我在chartJs中有折线图的代码。我想删除或禁用此图表的 yAxis。

var lineChartData = {
                    labels: ["FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER", "JANUARY", "FEBRUARY", "MARCH", "APRIL"],
                    datasets: [{
                        fillColor: "#ff1e6d",
                        strokeColor: "#ff1e6d",
                        pointColor: "#ff1e6d",
                        data: [290, 390, 300, 440, 625, 375, 390, 325, 280, 295, 385, 295, 485, 280, 265]
                    }, {
                        fillColor: "#ffc000",
                        strokeColor: "rgba(220,180,0,1)",
                        pointColor: "#ffc000",
                        data: [190, 200, 420, 390, 150, 250, 160, 155, 200, 260, 240, 500, 300, 210, 230, 270]
                    }]

                }

                Chart.defaults.global.animationSteps = 50;
                Chart.defaults.global.tooltipYPadding = 0;
                Chart.defaults.global.tooltipCornerRadius = 0;
                Chart.defaults.global.tooltipTitleFontStyle = "normal";
                Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
                Chart.defaults.global.animationEasing = "easeOutBounce";
                Chart.defaults.global.responsive = true;
                Chart.defaults.global.scaleLineColor = "#816cab";
                Chart.defaults.global.scaleFontSize = 11;
                Chart.defaults.global.scaleFontColor = "white";

                var ctx = document.getElementById("fill").getContext("2d");
                var LineChartDemo = new Chart(ctx).Line(lineChartData, {
                    pointDotRadius: 0,
                    bezierCurve: true,
                    scaleShowVerticalLines: false,
                    scaleGridLineColor: "transparent"

                });

这里是index.html的相关代码

  <div class="row">
                <div class="col-sm-12" id="fillchart" >
                    <canvas id="fill"></canvas>
                </div>
  </div>

我的要求是，这个图表的y轴不应该显示。

Answer 1

在图表选项中，您可以定义是否显示 yAxis。

options: {  
    ...
    scales: {
      yAxes: [{
        display: false
      }]
    }
  }

请检查以下可运行的代码片段。

var lineChartData = {
  labels: ["FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER", "JANUARY", "FEBRUARY", "MARCH", "APRIL"],
  datasets: [{
    label: "X",
    fillColor: "#ff1e6d",
    strokeColor: "#ff1e6d",
    pointColor: "#ff1e6d",
    data: [290, 390, 300, 440, 625, 375, 390, 325, 280, 295, 385, 295, 485, 280, 265]
  }, {
    label: "Y",
    fillColor: "#ffc000",
    strokeColor: "rgba(220,180,0,1)",
    pointColor: "#ffc000",
    data: [190, 200, 420, 390, 150, 250, 160, 155, 200, 260, 240, 500, 300, 210, 230, 270]
  }]
}

Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 0;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "#816cab";
Chart.defaults.global.scaleFontSize = 11;
Chart.defaults.global.scaleFontColor = "white";

new Chart(document.getElementById("fill"), {
  type: 'line',
  data: lineChartData,
  options: {  
    pointDotRadius: 0,
    bezierCurve: true,
    scaleShowVerticalLines: false,
    scaleGridLineColor: "transparent",
    scales: {
      yAxes: [{
        display: false
      }]
    }
  }
});

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