我如何用Chart.js在条形图上放置水平网格线？

z9smfwbn 于 12个月前发布在 Chart.js

关注(0)|答案(2)|浏览(175)

我有一个Chart.js，输出看起来像第一个图像，我希望它看起来像第二个图像，其中y轴线将"交叉"酒吧和空间，它了一点，以更好的可见性，我不认为我们可以调用这个填充或我如何才能管理创建这种效果使用Chart.js？

的数据

的
这是我的代码，创建了像第一张图片一样的条形图，谢谢。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>$DOGI Listings Graph</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      background-color: black;
      color: white;
    }
    
    canvas {
      width: 100% !important;
      height: 100% !important;
    }
  </style>
</head>

<body style="background-color: black;color: white;">

  <canvas id="myChart"></canvas>

  <script>
    const chartData = [{
        x: 1,
        y: 34504
      }, {
        x: 2,
        y: 47831
      },
      {
        x: 3,
        y: 7050
      }, {
        x: 4,
        y: 8009
      },
      {
        x: 5,
        y: 8400
      }, {
        x: 6,
        y: 1250
      },
      {
        x: 7,
        y: 2505
      }, {
        x: 8,
        y: 2001
      },
      {
        x: 9,
        y: 88
      }, {
        x: 10,
        y: 650
      },
      {
        x: 11,
        y: 1350
      }, {
        x: 12,
        y: 200
      },
      {
        x: 13,
        y: 12782
      }, {
        x: 14,
        y: 1000
      },
      {
        x: 15,
        y: 50
      }, {
        x: 16,
        y: 500
      },
      {
        x: 17,
        y: 204
      }, {
        x: 18,
        y: 15
      },
      {
        x: 19,
        y: 250
      }, {
        x: 20,
        y: 1200
      },
      {
        x: 21,
        y: 200
      }, {
        x: 22,
        y: 200
      },
      {
        x: 23,
        y: 100
      }, {
        x: 24,
        y: 200
      },
      {
        x: 25,
        y: 450
      }
    ]

    async function createGraphData() {
      const ctx = document.getElementById('myChart').getContext('2d');
      const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          datasets: [{
            label: '# of Tokens',
            data: chartData,
            backgroundColor: 'rgb(255,165,3,0.8)',
          }]
        },
        options: {
          legend: {
            display: false
          },
          scales: {
            x: {
              type: 'linear',
              position: 'bottom',
              min: 0,
              max: 25,
              ticks: {
                stepSize: 1,
                color: 'white',
                autoSkip: false,
              },

              title: {
                display: true,
                text: 'Price $ (USD)',
                color: 'white'
              }
            },
            y: {
              beginAtZero: true,
              grid: {
                color: 'rgba(255,255,255,0.1)'
              },
              title: {
                display: true,
                text: 'Number of Tokens',
                color: 'white'
              },

              ticks: {
                color: 'white'
              }
            }
          },
          plugins: {
            legend: {
              display: false,
              labels: {
                color: 'white'
              }
            },
            title: {
              display: true,
              text: 'Chart Title',
              color: 'white',
              font: {
                size: 24
              }
            }
          },
          maintainAspectRatio: false,
          responsive: true,
          barPercentage: 0.7,
          categoryPercentage: 0.8,
        }
      });
    }

    createGraphData().catch(console.error);
  </script>

</body>

</html>

字符串

chart.js

来源：https://stackoverflow.com/questions/77620606/how-can-i-place-horizontal-gridlines-above-bars-with-chart-js

2条答案

按热度按时间

lb3vh1jj1#

只需将z属性添加到您的scale in选项的网格中并将其设置为1，而默认值为-1对于间距，您可以使用破折号属性添加边框选项并设置数组中的间距这里有一个示例，其中包含一些可能适合您的情况和颜色的值，您可以将它们添加到scales对象内的“y”对象：

grid: {
    color: 'rgba(255,255,255,0.35)',
    z:1,
},
border:{
       dash:[3,3]
},

字符串
还可以查看文档以了解更多ChartJs styling

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$DOGI Listings Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            background-color: black;
            color: white;
        }

        canvas {
            width: 100% !important;
            height: 100% !important;
        }
    </style>
</head>

<body style="background-color: black;color: white;">

<canvas id="myChart"></canvas>

<script>

    const chartData = [
        { x: 1, y: 34504 }, { x: 2, y: 47831 },
        { x: 3, y: 7050 }, { x: 4, y: 8009 },
        { x: 5, y: 8400 }, { x: 6, y: 1250 },
        { x: 7, y: 2505 }, { x: 8, y: 2001 },
        { x: 9, y: 88 }, { x: 10, y: 650 },
        { x: 11, y: 1350 }, { x: 12, y: 200 },
        { x: 13, y: 12782 }, { x: 14, y: 1000 },
        { x: 15, y: 50 }, { x: 16, y: 500 },
        { x: 17, y: 204 }, { x: 18, y: 15 },
        { x: 19, y: 250 }, { x: 20, y: 1200 },
        { x: 21, y: 200 }, { x: 22, y: 200 },
        { x: 23, y: 100 }, { x: 24, y: 200 },
        { x: 25, y: 450 }
    ]

    async function createGraphData() {
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                datasets: [{
                    label: '# of Tokens',
                    data: chartData,
                    backgroundColor: 'rgb(255,165,3,0.8)',
                }]
            },
            options: {
                legend: {
                    display: false
                },
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom',
                        min: 0,
                        max: 25,
                        ticks: {
                            stepSize: 1,
                            color: 'white',
                            autoSkip: false,
                        },

                        title: {
                            display: true,
                            text: 'Price $ (USD)',
                            color: 'white'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(255,255,255,0.35)',
                            z:1,
                        },
                        border:{
                            dash:[3,3]
                        },
                        title: {
                            display: true,
                            text: 'Number of Tokens',
                            color: 'white'
                        },

                        ticks: {
                            color: 'white'
                        },
                    }
                },
                plugins: {
                    legend: {
                        display: false,
                        labels: {
                            color: 'white'
                        }
                    },
                    title: {
                        display: true,
                        text: 'Chart Title',
                        color: 'white',
                        font: {
                            size: 24
                        }
                    }
                },
                maintainAspectRatio: false,
                responsive: true,
                barPercentage: 0.7,
                categoryPercentage: 0.8,
            }
        });
    }

    createGraphData().catch(console.error);

</script>

</body>

</html>

型

赞(0）回复(0）举报 12个月前

drkbr07n2#

你可以使用z属性将Y轴网格移动到条形图层的上方。我不确定这是否满足你的所有要求。我还调整了颜色。
https://www.chartjs.org/docs/latest/axes/styling.html

const chartData = [{
    x: 1,
    y: 34504
  }, {
    x: 2,
    y: 47831
  },
  {
    x: 3,
    y: 7050
  }, {
    x: 4,
    y: 8009
  },
  {
    x: 5,
    y: 8400
  }, {
    x: 6,
    y: 1250
  },
  {
    x: 7,
    y: 2505
  }, {
    x: 8,
    y: 2001
  },
  {
    x: 9,
    y: 88
  }, {
    x: 10,
    y: 650
  },
  {
    x: 11,
    y: 1350
  }, {
    x: 12,
    y: 200
  },
  {
    x: 13,
    y: 12782
  }, {
    x: 14,
    y: 1000
  },
  {
    x: 15,
    y: 50
  }, {
    x: 16,
    y: 500
  },
  {
    x: 17,
    y: 204
  }, {
    x: 18,
    y: 15
  },
  {
    x: 19,
    y: 250
  }, {
    x: 20,
    y: 1200
  },
  {
    x: 21,
    y: 200
  }, {
    x: 22,
    y: 200
  },
  {
    x: 23,
    y: 100
  }, {
    x: 24,
    y: 200
  },
  {
    x: 25,
    y: 450
  }
]

async function createGraphData() {
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      datasets: [{
        label: '# of Tokens',
        data: chartData,
        backgroundColor: 'rgb(255,165,3,0.8)',
      }]
    },
    options: {
      legend: {
        display: false
      },
      scales: {
        x: {
          type: 'linear',
          position: 'bottom',
          min: 0,
          max: 25,
          ticks: {
            stepSize: 1,
            color: 'white',
            autoSkip: false,
          },
          title: {
            display: true,
            text: 'Price $ (USD)',
            color: 'white'
          }
        },
        y: {
          beginAtZero: true,
          grid: {
            color: 'rgba(50,50,50,0.5)',
            z: 1
          },
          title: {
            display: true,
            text: 'Number of Tokens',
            color: 'white'
          },
          ticks: {
            color: 'white'
          }
        }
      },
      plugins: {
        legend: {
          display: false,
          labels: {
            color: 'white'
          }
        },
        title: {
          display: true,
          text: 'Chart Title',
          color: 'white',
          font: {
            size: 24
          }
        }
      },
      maintainAspectRatio: false,
      responsive: true,
      barPercentage: 0.7,
      categoryPercentage: 0.8,
    }
  });
}

createGraphData().catch(console.error);

个字符

赞(0）回复(0）举报 12个月前

我来回答

我如何用Chart.js在条形图上放置水平网格线？

2条答案

相关问题

热门标签

最新问答