时间戳

首页 > 解决方案 > Chart.js 段着色仅适用于 5 个或更多数据点

chart.js - Chart.js 段着色仅适用于 5 个或更多数据点

问题描述

我有一个奇怪的问题，我的分段线着色只有在我有 5 个或更多数据点时才有效。4 或更少的线段只是灰色的。我已经公开了我的 Replit 测试页面：https ://replit.com/@FutureX5/ChartTest2#index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width'>
  <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.min.js'></script>
</head>

<body>
  <div style='position: relative; margin: auto;height: 90vh;width: 90vw;'> <canvas id='myChart'></canvas> </div>
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['5/20/2021','5/28/2021', '6/4/2021', '6/11/2021', '6/18/2021'],
        datasets: [{
          data: [2,3, 0, 1, 0],
          backgroundColor: (ctx) => {
            if (ctx.parsed === undefined) return;
            return ctx.parsed.y < 2 ? 'red' : 'green'
          },
          fill: false,
          segment: {
            borderColor: ctx => (ctx.p1.parsed.y < 2 ? 'red' : 'green')
          },
        }]
      },
      options: {
        maintainAspectRatio: false,
        scales: {
          y: {
            type: 'linear',
            min: 0,
            max: 10,
            position: 'left',
            ticks: {
              font: {
                size: 18
              },
            }
          }
        },
        animation: {
          duration: 1000,
        },
        plugins: {
          legend: {
            display: false,
            position: 'bottom',
            title: {
              color: 'blue'
            }
          },
          title: {
            display: true,
            align: 'center',
            text: ['Student Bookings - SS T/T Day'],
            font: {
              size: 30,
              family: 'Helvetica Neue'
            }
          },
          annotation: {
            annotations: {
              line1: {
                type: 'line',
                yMin: 2,
                yMax: 2,
                borderColor: 'blue',
                borderWidth: 3,
              }
            }
          }
        },
        elements: {
          point: {
            radius: 6,
            hoverRadius: 10
          },
          line: {
            borderWidth: 4
          }
        },
      }
    });
  </script>
</body>

</html>

但是，如果我删除一条数据，总共有 4 个，我就会得到这个：

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width'>
  <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.min.js'></script>
</head>

<body>
  <div style='position: relative; margin: auto;height: 90vh;width: 90vw;'> <canvas id='myChart'></canvas> </div>
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['5/28/2021', '6/4/2021', '6/11/2021', '6/18/2021'],
        datasets: [{
          data: [3, 0, 1, 0],
          backgroundColor: (ctx) => {
            if (ctx.parsed === undefined) return;
            return ctx.parsed.y < 2 ? 'red' : 'green'
          },
          fill: false,
          segment: {
            borderColor: ctx => (ctx.p1.parsed.y < 2 ? 'red' : 'green')
          },
        }]
      },
      options: {
        maintainAspectRatio: false,
        scales: {
          y: {
            type: 'linear',
            min: 0,
            max: 10,
            position: 'left',
            ticks: {
              font: {
                size: 18
              },
            }
          }
        },
        animation: {
          duration: 1000,
        },
        plugins: {
          legend: {
            display: false,
            position: 'bottom',
            title: {
              color: 'blue'
            }
          },
          title: {
            display: true,
            align: 'center',
            text: ['Student Bookings - SS T/T Day'],
            font: {
              size: 30,
              family: 'Helvetica Neue'
            }
          },
          annotation: {
            annotations: {
              line1: {
                type: 'line',
                yMin: 2,
                yMax: 2,
                borderColor: 'blue',
                borderWidth: 3,
              }
            }
          }
        },
        elements: {
          point: {
            radius: 6,
            hoverRadius: 10
          },
          line: {
            borderWidth: 4
          }
        },
      }
    });
  </script>
</body>

</html>

  1. 项目清单

标签： chart.jslinechart

解决方案

推荐阅读