Question

附上示例。由于某种原因，我无法将x或y轴标签显示在折线图（图表）上。代码如下所示。我已经尝试了我能想到的一切！我需要显示轴标签。标签代码在那里，但有些东西是关闭的？我至少需要一个x轴来显示在底部轴上的时间。

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["0", "5", "10", "15", "20", "25"],
        datasets: [{
       label: 'HR/Bpm',
            data: [72, 175, 72, 175, 72, 72],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }


]
    },
    options: {
    title: {
        display: true,
        text: '(Expected) Physical Work Load'
      },
        scales: {
            yAxes: [{
scaleLabel: {
                            display: true,
                            labelString: 'HR (Bpm)'
                        },
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Time (Mins)'
                        }
                    }],
        }
    },

});
</script>
            </div>
        </div>
        <div class="gantry-width-50">
            <div class="gantry-width-spacer">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
                <canvas id="doughnut-chart" width="380" height="280"></canvas>
<script>
new Chart(document.getElementById("doughnut-chart"), {
    type: 'doughnut',
    data: {
      labels: ["Technical", "Tactical", "Social", "Physical"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#3d6b1f","#e6e600","#ff3300"],
          data: [27,67,34,14]
        }
      ]
    },

    options: {
legend: {
         display: true,
         position: "right",
labels:{
        boxWidth:10 //Width legend colorbox
    }
      },

      title: {
        display: true,
        text: 'Content Distribution'
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
          <canvas id="myChart" width="400" height="300"></canvas>

Answer 1

代码中有两个“选项”，导致它运行不正常。在编辑器中找出它。一切都需要在Chart.js中的一个“选项”下。解决了，等待关闭。

X和Y轴标签未显示在折线图上（Chart.js）

1 个答案: