js折线图不显示经过图表中某一点的线

qzlgjiam 于 2021-09-23 发布在 Java

关注(0)|答案(0)|浏览(243)

出于某种原因，我的折线图没有正确显示数据集中某一点之后的直线，我无法找出这种情况的原因。
我有另一个图表，它加载了基本相同的数据集，并且显示得很好（唯一的区别是折线图有填充、边框颜色和张力属性）。

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <script>

    const data_bar_chart = {
        labels: {{ labels | safe }},
        datasets: {{ data_list | safe}}
    };
    const config_bar_chart = {
    type: 'bar',
    data: data_bar_chart,
    options: {
        plugins: {
        title: {
            display: true,
            text: 'Bar Chart - Stacked'
        },
        },
        legend: {
          position: "top",
          align: "start"
        },
        responsive: false,
        scales: {
          xAxes: [{ 
            stacked: true,
            ticks: {
              padding: 20
            }
            }],
          yAxes: [{ 
            stacked: true,
            }],
        },
    }
    };

    const data_line_chart = {
      labels: {{ labels | safe }},
      datasets: {{ data_list_line_chart | safe}}
    };

    const config_line_chart = {
      type: 'line',
      data: data_line_chart,

      options: {
        plugins: {
        title: {
            display: true,
            text: 'Line Chart'
        },
        },
        legend: {
          position: "top",
          align: "start"
        },
        responsive: false,
        scales: {
          xAxes: [{ 
            ticks: {
              padding: 20
            }
            }],

        },
    }
    };

    window.onload = function() {
      var ctx_bar_chart = document.getElementById('bar-chart-stacked').getContext('2d');
      window.myPie = new Chart(ctx_bar_chart, config_bar_chart);
      var ctx_line_chart = document.getElementById('line-chart').getContext('2d');
      window.myPie = new Chart(ctx_line_chart, config_line_chart);
    };
  </script>

.chartWrapper {
    position: relative;
  }

  .chartWrapper > canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }

  .chartAreaWrapper {
    width: 1000px;
    overflow-x: scroll;
  }

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project Scanner</title>
  <meta name="description" content="Project Scanner">
  <link rel="stylesheet" href="{% static 'css/chart.css' %}">

</head>

<body>
      <div class="chartWrapper">
        <div class="chartAreaWrapper">
          <canvas id="bar-chart-stacked" height="400" width="25000"></canvas>
        </div>
      </div>

      <div class="chartWrapper">
        <div class="chartAreaWrapper">
          <canvas id="line-chart" height="400" width="25000"></canvas>  
        </div>
      </div>
</body> 
</html>

下面是正在发生的事情的图片：

我使用django作为框架，并通过模板传递解析后的数据集。
提前谢谢你！