chartjs 2.9.4 尝试做一条固定的水平线

问题描述 投票：0回答：1

我试图在 chartjs 2.9.4 中创建一条固定的水平线，但我似乎做不对。目的是显示是否超过了将由水平线表示的固定值。看起来我正确地遵循了这个版本的 chartjs 的文档，但我只是遇到了问题。感谢您的帮助。



<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartMenu {
        width: 100vw;
        height: 40px;
        background: #1A1A1A;
        color: rgba(54, 162, 235, 1);
      }
      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }
      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(54, 162, 235, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(54, 162, 235, 1);
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script>
    // setup 
    const data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };


    const horizontalLine = {
   id: 'horizontalLine',
   afterDatasetDraw(chart, args, options){
      const {ctx, chartArea: {top, right, bottom, left, width, height},
      scales:{x, y} } = chart;
      ctx.save();

      ctx.strokeStyle = 'green';
      ctx.strokeRect(left, y.getPixelForValue(12), width, 0);
      ctx.restore();
   }
 }



    // config 
    const config = {
      type: 'line',
      data,
      options: {
        scales: {
          yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        plugins: [horizontalLine]
        
      },
    };

    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );



    </script>

  </body>
</html>
javascript html chart.js
1个回答
0
投票

有几个错误。

  1. Config：
    plugins
    节点设置在代码中的
    options
    中。相反，它应该在 
    options, data and type
    （见下文）的同一级别中定义。
  2. 插件：你指的是假设他们的ID是
    x
    和
    y
    的尺度。在 chartjs 2.x 中，刻度 ID 不是 x 和 y（默认情况下），而是 x/y-axis-0。
  3. 插件：chartjs 版本 2 中的图表区域没有宽度和高度（它们将随版本 3 一起提供）因此您应该使用 
    right
    值来获取宽度。

    // setup 
    const data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };


 const horizontalLine = {
   id: 'horizontalLine',
   afterDatasetDraw(chart, args, options){
      const {ctx, chartArea: {top, right, bottom, left},
      scales:{y} } = chart;
      ctx.save();
      ctx.strokeStyle = 'green';
      ctx.strokeRect(left, y.getPixelForValue(12), right - left, 0);
      ctx.restore();
   }
 }



    // config 
    const config = {
      type: 'line',
      data,
      plugins: [horizontalLine],
      options: {
        scales: {
          yAxes: [{
                id: 'y',
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        
      },
    };

    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.