1

我是 JSCharts 的新手，我有两个图表，但它们的大小不同，我怎样才能使它们的大小相同？我已经在折线图中尝试了建议的最小值和建议的最大值，但它仍然从 0 开始 Y 刻度。另外，我想确保两个封闭的图表是相同的高度，假设是气泡图。

<script>
  var areachart = document.getElementById("lineprices").getContext("2d");
  const historic_mean = JSON.parse("{{historic_mean|escapejs}}");
  const historic_max = JSON.parse("{{historic_max|escapejs}}");
  const historic_min = JSON.parse("{{historic_min|escapejs}}");
  const historic_dates = JSON.parse("{{historic_dates|escapejs}}");
  console.log("historic_mean", historic_mean);
  console.log("historic_max", historic_max);
  console.log("historic_min", historic_min);
  console.log("historic_dates", historic_dates);

  var configareachart = new Chart(areachart, {
    type: "line",
    data: {
      labels: historic_dates,
      datasets: [
        {
          label: "My First dataset",
          borderWidth: "2",
          borderColor: "#5B92FF",
          backgroundColor: "rgba(0, 0, 0, 0)",
          data: historic_max,
        },
        {
          label: "My Second dataset",
          borderWidth: "2",
          borderColor: "#F85778",
          backgroundColor: "rgba(0, 0, 0, 0)",
          data: historic_mean,
        },
        {
          label: "My Third dataset",
          borderWidth: "2",
          borderColor: "#1FC96E",
          backgroundColor: "rgba(0, 0, 0, 0)",
          data: historic_min,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      elements: {
        point: {
          radius: 0,
        },
      },
      title: {
        display: false,
        text: "Chart.js Line Chart - Stacked Area",
      },
      tooltips: {
        mode: "index",
      },
      hover: {
        mode: "index",
      },
      legend: {
        display: false,
      },
      scales: {
        xAxes: [
          {
            ticks: {
              display: true,
              fontColor: "#90b5ff",
            },
            scaleLabel: {
              display: false,
              labelString: "Month",
            },
          },
        ],
        yAxes: [
          {
            ticks: {
              display: true,
              fontColor: "#90b5ff",
              suggestedMin: 10000,
              suggestedMax: 100000,
              stepValue: 5000,
            },
          },
        ],
      },
    },
  });
</script>

两个图表，折线图的大小/高度应与气泡图相同

4

1 回答 1

0

显然，不要使用

responsive: true,
maintainAspectRatio: false,
于 2021-09-06T16:59:37.617 回答