Блог

Я новичок в JSCharts, у меня есть две диаграммы, но они разных размеров, как я могу сделать их одинакового размера? Я пробовал suggestedMin и suggestedMax на линейном графике, но он все равно начинается с 0. Кроме того, я хочу убедиться, что два вложенных графика имеют одинаковую высоту, линия должна быть как пузырьковая диаграмма.

 <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>
 

По-видимому, не используйте

 responsive: true,
maintainAspectRatio: false,