chart.js 折线图不显示超过图表中某个点的线答案

【问题标题】：chart.js Line chart doesn't display line past a certain point in the chartchart.js 折线图不显示超过图表中某个点的线
【发布时间】：2021-09-19 22:59:54
【问题描述】：

由于某种原因，我的折线图没有正确显示超过数据集中某个点的线，我无法弄清楚为什么会出现这种情况。

我有另一个图表，它加载基本相同的数据集，并且显示得很好（唯一的区别是折线图具有填充、边框颜色和张力属性）。

<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 作为框架，并通过我的模板传递解析的数据集。

提前谢谢你！

【问题讨论】：

标签： javascript html css django chart.js

【解决方案1】：

将这两行代码添加到脚本中为我解决了这个问题：

  Chart.helpers.canvas.clipArea = function() {};
  Chart.helpers.canvas.unclipArea = function() {};

【讨论】：