Блог

Я работаю над 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 chartData = {
  labels: ["Product"],
  datasets: [{
      label: 'P2',
      data: [29566],
      backgroundColor: colors[0]
    },
    {
      label: 'P3',
      data: [2],
      backgroundColor: colors[1]
    },
    {
      label: 'P4',
      data: [3],
      backgroundColor: colors[2]
    }
  ]
};

new Chart('myChart', {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      xAxes: [{ 
          barPercentage: 0.5,
          categoryPercentage: 0.5
        }
      ],
      yAxes: [{
        gridLines: {
          display: false
        },
        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 '';
          }
        }
      }]
    },
    legend: {
      display: true,
      maxWidth: 100,
      padding: 30,
      fullWidth: true,
      position: 'bottom',
      lineHeight: 12,
      justifyContent: 'space-between',
      labels: {
        fontSize: 10,
        usePointStyle: true
      }
    }
  }
});  

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" height="150"></canvas>