首页 > 解决方案 > Chart.js 条形重叠

问题描述

我尝试从 chart.js 条码中调整、添加、减去,但我得到重叠条,如您所见: 在此处输入图像描述

代码:

fetch("/Ajax").then(response => response.json()).then(function (response) {
      if (response == null) {
        console.log(response);
      } else {
        console.log(response);
        const config = {
          type: 'bar',
          data: {
            labels: chart_labels,
            datasets: [{
              label: "My First dataset",
              fill: true,
              backgroundColor: gradientStroke,  
              borderColor: '#d346b1',
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              pointBackgroundColor: '#d346b1',
              pointBorderColor: 'rgba(255,255,255,0)',
              pointHoverBackgroundColor: '#d346b1',
              pointBorderWidth: 20,
              pointHoverRadius: 4,
              pointHoverBorderWidth: 15,
              pointRadius: 4,
              data: response
            }]
          },
          options: gradientChartOptionsConfigurationWithTooltipPurple    
        };
        var dtx = document.getElementById("chartBig1").getContext("2d");
        var myChartData = new Chart(dtx, config);
        $("#0").click(function() {
          var data = response;
          data.datasets[0].data = response;
          data.labels = response;//['9','10','11','12','1','2','3','4','5','6','7','8','9','10','11','12'];
          myChartData.update();
        });

我不确定如何使条形彼此分开。

标签: javascriptjquerychart.js

解决方案


推荐阅读