在堆叠的水平条形图中如何删除Chart.js中的垂直线？ [英] In Stacked horizontal bar chart how to remove the vertical line in Chart.js?

问题描述

我找不到解决方案以删除堆积水平条形图的图形区域中的线！ ，在模型下方显示了需要显示x和y轴线的详细信息，但是当前当我设置gridLabel：{display：none}每条垂直线

I am unable to find the solution to remove the line in graph area for Stacked horizontal bar chart! , below mocke up show the details where i need the x and y axis line need to be shown but currently the when i set the gridLabel:{display:none} every vertical lines are removed

  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
      }
    ]
  },

代码笔链接：

推荐答案

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

Set the following properties for x-axis grid-lines :

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

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

also, change the color for y-axis grid-lines :

color: "black"

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

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
});

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

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

这篇关于在堆叠的水平条形图中如何删除Chart.js中的垂直线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！