Javascript 如何减少stack bar graph chart.js中多条网格线的数量

我正在编写

chart.js

以实现堆栈条形图。该图表几乎没有类似的问题

• 不在左侧垂直显示勾号大小
• 显示不需要的水平网格线
• 在顶部而不是底部显示水平粗线

这是我的密码

public stackbar()
{
  Chart.defaults.global.datasets.bar.barPercentage = 0.5;
  Chart.defaults.global.datasets.bar.categoryPercentage = 0.5;

  var colors = ['#299DFF','#80FFFF','#F8362B',];
  var chBar = document.getElementById("mychart");
  var chartData = {
  labels: ["Product"],
  datasets: [{
    label: 'P2',
    data: [29566],
    backgroundColor: colors[0]
  },
  {
    label: 'P3',
    data: [O2],
    backgroundColor: colors[1]
  },
  {
    label: 'P4',
    data: [3],
    backgroundColor: colors[2]
  }
]
};
if (chBar) {
  new Chart(chBar, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          display:false
      },
      //barPercentage: 0.5,
      //categoryPercentage: 0.5    
        barPercentage: 0.5,
        categoryPercentage: 0.5
      }
    
    ],
      yAxes: [{
        gridLines: {
          display:true
      },
        type: 'logarithmic',
        ticks: {
          beginAtZero: true,
          userCallback: (value, index) => {
            const remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));
            if (remain == 1 || remain == 2 || remain == 5 || index == 0) {
              return value.toLocaleString();
            }
            return '';
          },       
          suggestedMax: 80,
          padding: 25
        }
      }]
    },
    legend: {
      display: true,
      maxWidth: 100,
      padding:30,      
      fullWidth:true,            
      position: 'bottom',
      lineHeight: 12,      
      justifyContent: 'space-between',
      labels: {
          fontSize: 10,
          usePointStyle: true
      }
    },
  }
  });
}

这是截图

---

如何解决这些问题？

可以通过图表选项中的以下配置删除水平网格线：

yAxes: [{
  gridLines: {
    display: false
  },

我在您的代码中更改了这一点，并删除了一些不必要的定义，正如您在下面的可运行代码中所看到的那样，它看起来很好

var colors=['299DFF'、'80FFFF'、'F8362B'；
var图表数据={
标签：[“产品”]，
数据集：[{
标签：“P2”，
数据：[29566]，
背景颜色：颜色[0]
},
{
标签：“P3”，
数据：[2]，
背景颜色：颜色[1]
},
{
标签：“P4”，
数据：[3]，
背景颜色：颜色[2]
}
]
};
新图表（“myChart”{
类型：'bar'，
数据：图表数据，
选项：{
比例：{
xAxes:[{
百分比：0.5，
类别类别：0.5
}
],
雅克斯：[{
网格线：{
显示：假
},
类型：'对数'，
滴答声：{
贝吉纳泽罗：是的，
userCallback：（值，索引）=>{
const remain=value/（Math.pow（10，Math.floor（Chart.helpers.log10（value）））；
如果（剩余==1 | |剩余==2 | |剩余==5 | |索引==0）{
返回值.toLocaleString（）；
}
返回“”；
}
}
}]
},
图例：{
显示：对，
最大宽度：100，
填充：30，
全宽：对，
位置：'底部'，
线高：12，
justifyContent:'之间的空间'，
标签：{
尺寸：10，
usePointStyle:true
}
}
}
});

谢谢您的回答。这是否可能将步长增加近5k。看起来很密。是的，看看Chart.js文档。在轴中设置
stepSize
刻度
对象：嗨，我看不到stepSize，它只在顶部显示30k。我只是复制粘贴了你的代码。使用
“chart.js-2.9.3”
在html中添加
脚本，导入的是
节点模块/chart.js
。我的图表中的差异被删除网格线，显示底部、左侧和右侧。我的html