我正在使用图表 js 绘制图表。我做的一切都正确，但我不知道为什么 x 轴和 y 轴标签没有出现在图表中。下面的代码

Question

在此 chart.js 图表中，我希望在 y 轴上显示“项目计数”标签，在 x 轴上显示“安装程序”标签。目前，对于 x 轴，我正在使用 h5 html 标签（不正确）。我在下面附上了我的 chart.js javascript 代码。 chart.js 图表的图像也在下方添加。提前致谢。我的代码：

<div class="cardImage" style="width:97%;height:480px;margin-top:40px;margin-left:20px;margin-right:10px;">
  <div class="columnChild child3" style="position: relative; height:32vh; width:80vw">
    <canvas class="bubble" id="bubble" style="margin-left:10px;width:25px;height:10px;"></canvas>
  </div>

  <center>
    <h5 style="color:black;margin-top:240px; margin-left:-100px;">Installers</h5>
  </center>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    var bubbleBackgroundColor = function () {
      return 'rgba(194, 106, 137, 0.8)'
    };
    var bubbleBorderColor = function () {
      return 'rgba(243, 193, 28, 0.8)'
    };
    var bubbleData = {{ data['bubbleData'] | tojson }};
    var bubbleCategory = {{ data["bubbleCategory"] | tojson }};
    var colorBubbleHover = {{ data['colorBubbleHover'] | tojson }};
    var pointBorderColor = {{ data['pointBorderColor'] | tojson }};
    var bubbleChartData = {
      animation: {
        duration: 10
      },
      datasets: [{
        label: "Customer Segment",
        fill: true,
        lineTension: 0.1,
        backgroundColor: bubbleBackgroundColor(),
        borderColor: bubbleBorderColor(),
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: pointBorderColor,       //"rgba(75,192,192,1)"
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: colorBubbleHover,
        pointHoverBorderColor: "blue",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: bubbleData,
      }],
    };

    var ctx = document.getElementById('bubble');
    var bubble = new Chart(ctx, {
      type: 'bubble',
      data: bubbleChartData,
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: false,
          }
        },
        scales: {
          x: {
            type: 'category',
            labels: bubbleCategory,
            labelStrng: "Installers",
            scaleLabel: {
              display: true,
              labelString: "Project Count",
              fontStyle: 'bold',
              fontColor: "black"
            }
          }

        }
      }
    });
  </script>
</div>

[我的气泡图图片][1] [1]: https://i.stack.imgur.com/LVZS4.png

Answer 1

这是因为您试图通过在 scaleLabel 选项中配置标题来使用 V2 语法。在 V3 中，这些选项已移至规模中的 title 命名空间：

new Chart('websitecalls_chartel', {
  type: 'line',
  data: {
    labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
    datasets: [{
      data: [0, 0, 0, 0, 0, 0, 0],
    }]
  },
  options: {
    scales: {
      x: {
        title: {
          display: true,
          text: 'x title',
          font: {
            weight: 'bold'
          },
        }
      },
      y: {
        title: {
          display: true,
          font: {
            weight: 'bold'
          },
          text: 'y title'
        }
      },
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="websitecalls_chartel" height="80"></canvas>

我正在使用图表 js 绘制图表。我做的一切都正确，但我不知道为什么 x 轴和 y 轴标签没有出现在图表中。下面的代码

I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below

javascript

css

chart.js