在Stacked水平条形图中如何删除Chart.js中的垂直线？

Question

我无法找到解决方案来删除堆积水平条形图的图形区域中的线条！ ，下面的模型显示我需要x和y轴线需要显示的细节但是当前我设置gridLabel的时候：{display：none}每个垂直线都被移除

＆＃13;

＆＃13;

  scales: {
    xAxes: [
      {
        ticks: {
          beginAtZero: true,
          fontFamily: "'Open Sans Bold', sans-serif",
          fontSize: 11
        },
        scaleLabel: {
          display: false
        },
      gridLines: {
          display: false,
        },
        ticks: {
          fontFamily: "'Open Sans Bold', sans-serif",
          fontSize: 11
        },
        stacked: true
      }
    ],
    yAxes: [
      {
        gridLines: {
          display: false,
          color: "#fff",
          zeroLineColor: "#fff",
          zeroLineWidth: 0
        },
        ticks: {
          fontFamily: "'Open Sans Bold', sans-serif",
          fontSize: 11
        },
        stacked: true
      }
    ]
  },

＆＃13;

＆＃13;

＆＃13;

codepen链接：code link

Answer 1

为x轴网格线设置以下属性：

drawOnChartArea: false,
color: "black",
zeroLineColor: "black"

另外，更改y轴网格线的颜色：

color: "black"

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

＆＃13;

＆＃13;

var barOptions_stacked = {
  tooltips: {
    enabled: false
  },
  hover: {
    animationDuration: 0
  },
  scales: {
    xAxes: [
      {
        ticks: {
          beginAtZero: true,
          fontFamily: "'Open Sans Bold', sans-serif",
          fontSize: 11
        },
        scaleLabel: {
          display: false
        },
        gridLines: {
          drawOnChartArea: false,
          color: "black",
          zeroLineColor: "black"
        },
        stacked: true
      }
    ],
    yAxes: [
      {
        gridLines: {
          display: false,
          color: "black",
          zeroLineColor: "#fff",
          zeroLineWidth: 0
        },
        ticks: {
          fontFamily: "'Open Sans Bold', sans-serif",
          fontSize: 11
        },
        stacked: true
      }
    ]
  },
  legend: {
    display: false
  },

  animation: {
    onComplete: function() {
      var chartInstance = this.chart;
      var ctx = chartInstance.ctx;
      ctx.textAlign = "left";
      ctx.font = "9px Open Sans";
      ctx.fillStyle = "#fff";

      Chart.helpers.each(
        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          Chart.helpers.each(
            meta.data.forEach(function(bar, index) {
              data = dataset.data[index];
              if (i == 0) {
                ctx.fillText(data, 50, bar._model.y + 4);
              } else {
                ctx.fillText(data, bar._model.x - 25, bar._model.y + 4);
              }
            }),
            this
          );
        }),
        this
      );
    }
  },
  pointLabelFontFamily: "Quadon Extra Bold",
  scaleFontFamily: "Quadon Extra Bold"
};

var ctx = document.getElementById("Chart1");
var myChart = new Chart(ctx, {
  type: "horizontalBar",
  data: {
    labels: ["82", " 81 ", "2", " 42", "4"],

    datasets: [
      {
        data: [727, 589, 537, 543, 20],
        backgroundColor: "#5f8a58",
        hoverBackgroundColor: "rgba(50,90,100,1)"
      },
      {
        data: [238, 553, 746, 884, 122],
        backgroundColor: "#3f7faa",
        hoverBackgroundColor: "rgba(140,85,100,1)"
      },
      {
        data: [100, 100, 100, 100, 100],
        backgroundColor: "#000",
        hoverBackgroundColor: "rgba(140,85,100,1)"
      }
    ]
  },

  options: barOptions_stacked
});

＆＃13;

.graph_container {
  display: block;
  width: 500px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<div class="graph_container">
  <canvas id="Chart1"></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;