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

Posted

技术标签:

【中文标题】chart.js 折线图不显示超过图表中某个点的线【英文标题】：chart.js Line chart doesn't display line past a certain point in the chart 【发布时间】：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"  ></canvas>
        </div>
      </div>

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

这是正在发生的事情的图片：

我使用 Django 作为框架，并通过我的模板传递解析的数据集。

提前谢谢你！

【问题讨论】：

【参考方案1】：

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

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

【讨论】：

以上是关于chart.js 折线图不显示超过图表中某个点的线的主要内容，如果未能解决你的问题，请参考以下文章

Chart.js 折线图未显示

Vue3 不显示折线图

超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

如何让基于html5 canvas的图表插件chart.js中的柱状图形横向显示

向 Chart.js 折线图添加标题

带有反应原生图表套件的不同颜色折线图