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

z9smfwbn  于 2024-01-07  发布在  Chart.js
关注(0)|答案(2)|浏览(249)

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


的数据


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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>$DOGI Listings Graph</title>
  8.   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  9.   <style>
  10.     html,
  11.     body {
  12.       height: 100%;
  13.       margin: 0;
  14.       background-color: black;
  15.       color: white;
  16.     }
  17.     
  18.     canvas {
  19.       width: 100% !important;
  20.       height: 100% !important;
  21.     }
  22.   </style>
  23. </head>
  25. <body style="background-color: black;color: white;">
  27.   <canvas id="myChart"></canvas>
  29.   <script>
  30.     const chartData = [{
  31.         x: 1,
  32.         y: 34504
  33.       }, {
  34.         x: 2,
  35.         y: 47831
  36.       },
  37.       {
  38.         x: 3,
  39.         y: 7050
  40.       }, {
  41.         x: 4,
  42.         y: 8009
  43.       },
  44.       {
  45.         x: 5,
  46.         y: 8400
  47.       }, {
  48.         x: 6,
  49.         y: 1250
  50.       },
  51.       {
  52.         x: 7,
  53.         y: 2505
  54.       }, {
  55.         x: 8,
  56.         y: 2001
  57.       },
  58.       {
  59.         x: 9,
  60.         y: 88
  61.       }, {
  62.         x: 10,
  63.         y: 650
  64.       },
  65.       {
  66.         x: 11,
  67.         y: 1350
  68.       }, {
  69.         x: 12,
  70.         y: 200
  71.       },
  72.       {
  73.         x: 13,
  74.         y: 12782
  75.       }, {
  76.         x: 14,
  77.         y: 1000
  78.       },
  79.       {
  80.         x: 15,
  81.         y: 50
  82.       }, {
  83.         x: 16,
  84.         y: 500
  85.       },
  86.       {
  87.         x: 17,
  88.         y: 204
  89.       }, {
  90.         x: 18,
  91.         y: 15
  92.       },
  93.       {
  94.         x: 19,
  95.         y: 250
  96.       }, {
  97.         x: 20,
  98.         y: 1200
  99.       },
  100.       {
  101.         x: 21,
  102.         y: 200
  103.       }, {
  104.         x: 22,
  105.         y: 200
  106.       },
  107.       {
  108.         x: 23,
  109.         y: 100
  110.       }, {
  111.         x: 24,
  112.         y: 200
  113.       },
  114.       {
  115.         x: 25,
  116.         y: 450
  117.       }
  118.     ]
  120.     async function createGraphData() {
  121.       const ctx = document.getElementById('myChart').getContext('2d');
  122.       const myChart = new Chart(ctx, {
  123.         type: 'bar',
  124.         data: {
  125.           datasets: [{
  126.             label: '# of Tokens',
  127.             data: chartData,
  128.             backgroundColor: 'rgb(255,165,3,0.8)',
  129.           }]
  130.         },
  131.         options: {
  132.           legend: {
  133.             display: false
  134.           },
  135.           scales: {
  136.             x: {
  137.               type: 'linear',
  138.               position: 'bottom',
  139.               min: 0,
  140.               max: 25,
  141.               ticks: {
  142.                 stepSize: 1,
  143.                 color: 'white',
  144.                 autoSkip: false,
  145.               },
  147.               title: {
  148.                 display: true,
  149.                 text: 'Price $ (USD)',
  150.                 color: 'white'
  151.               }
  152.             },
  153.             y: {
  154.               beginAtZero: true,
  155.               grid: {
  156.                 color: 'rgba(255,255,255,0.1)'
  157.               },
  158.               title: {
  159.                 display: true,
  160.                 text: 'Number of Tokens',
  161.                 color: 'white'
  162.               },
  164.               ticks: {
  165.                 color: 'white'
  166.               }
  167.             }
  168.           },
  169.           plugins: {
  170.             legend: {
  171.               display: false,
  172.               labels: {
  173.                 color: 'white'
  174.               }
  175.             },
  176.             title: {
  177.               display: true,
  178.               text: 'Chart Title',
  179.               color: 'white',
  180.               font: {
  181.                 size: 24
  182.               }
  183.             }
  184.           },
  185.           maintainAspectRatio: false,
  186.           responsive: true,
  187.           barPercentage: 0.7,
  188.           categoryPercentage: 0.8,
  189.         }
  190.       });
  191.     }
  193.     createGraphData().catch(console.error);
  194.   </script>
  196. </body>
  198. </html>

字符串

chart.js

2条答案

按热度按时间
lb3vh1jj

lb3vh1jj1#

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

  1. grid: {
  2.     color: 'rgba(255,255,255,0.35)',
  3.     z:1,
  4. },
  5. border:{
  6.        dash:[3,3]
  7. },

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>$DOGI Listings Graph</title>
  8.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  9.     <style>
  10.         html,
  11.         body {
  12.             height: 100%;
  13.             margin: 0;
  14.             background-color: black;
  15.             color: white;
  16.         }
  18.         canvas {
  19.             width: 100% !important;
  20.             height: 100% !important;
  21.         }
  22.     </style>
  23. </head>
  25. <body style="background-color: black;color: white;">
  27. <canvas id="myChart"></canvas>
  29. <script>
  31.     const chartData = [
  32.         { x: 1, y: 34504 }, { x: 2, y: 47831 },
  33.         { x: 3, y: 7050 }, { x: 4, y: 8009 },
  34.         { x: 5, y: 8400 }, { x: 6, y: 1250 },
  35.         { x: 7, y: 2505 }, { x: 8, y: 2001 },
  36.         { x: 9, y: 88 }, { x: 10, y: 650 },
  37.         { x: 11, y: 1350 }, { x: 12, y: 200 },
  38.         { x: 13, y: 12782 }, { x: 14, y: 1000 },
  39.         { x: 15, y: 50 }, { x: 16, y: 500 },
  40.         { x: 17, y: 204 }, { x: 18, y: 15 },
  41.         { x: 19, y: 250 }, { x: 20, y: 1200 },
  42.         { x: 21, y: 200 }, { x: 22, y: 200 },
  43.         { x: 23, y: 100 }, { x: 24, y: 200 },
  44.         { x: 25, y: 450 }
  45.     ]
  47.     async function createGraphData() {
  48.         const ctx = document.getElementById('myChart').getContext('2d');
  49.         const myChart = new Chart(ctx, {
  50.             type: 'bar',
  51.             data: {
  52.                 datasets: [{
  53.                     label: '# of Tokens',
  54.                     data: chartData,
  55.                     backgroundColor: 'rgb(255,165,3,0.8)',
  56.                 }]
  57.             },
  58.             options: {
  59.                 legend: {
  60.                     display: false
  61.                 },
  62.                 scales: {
  63.                     x: {
  64.                         type: 'linear',
  65.                         position: 'bottom',
  66.                         min: 0,
  67.                         max: 25,
  68.                         ticks: {
  69.                             stepSize: 1,
  70.                             color: 'white',
  71.                             autoSkip: false,
  72.                         },
  74.                         title: {
  75.                             display: true,
  76.                             text: 'Price $ (USD)',
  77.                             color: 'white'
  78.                         }
  79.                     },
  80.                     y: {
  81.                         beginAtZero: true,
  82.                         grid: {
  83.                             color: 'rgba(255,255,255,0.35)',
  84.                             z:1,
  85.                         },
  86.                         border:{
  87.                             dash:[3,3]
  88.                         },
  89.                         title: {
  90.                             display: true,
  91.                             text: 'Number of Tokens',
  92.                             color: 'white'
  93.                         },
  95.                         ticks: {
  96.                             color: 'white'
  97.                         },
  98.                     }
  99.                 },
  100.                 plugins: {
  101.                     legend: {
  102.                         display: false,
  103.                         labels: {
  104.                             color: 'white'
  105.                         }
  106.                     },
  107.                     title: {
  108.                         display: true,
  109.                         text: 'Chart Title',
  110.                         color: 'white',
  111.                         font: {
  112.                             size: 24
  113.                         }
  114.                     }
  115.                 },
  116.                 maintainAspectRatio: false,
  117.                 responsive: true,
  118.                 barPercentage: 0.7,
  119.                 categoryPercentage: 0.8,
  120.             }
  121.         });
  122.     }
  124.     createGraphData().catch(console.error);
  126. </script>
  128. </body>
  130. </html>

型

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
drkbr07n

drkbr07n2#

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

  1. const chartData = [{
  2.     x: 1,
  3.     y: 34504
  4.   }, {
  5.     x: 2,
  6.     y: 47831
  7.   },
  8.   {
  9.     x: 3,
  10.     y: 7050
  11.   }, {
  12.     x: 4,
  13.     y: 8009
  14.   },
  15.   {
  16.     x: 5,
  17.     y: 8400
  18.   }, {
  19.     x: 6,
  20.     y: 1250
  21.   },
  22.   {
  23.     x: 7,
  24.     y: 2505
  25.   }, {
  26.     x: 8,
  27.     y: 2001
  28.   },
  29.   {
  30.     x: 9,
  31.     y: 88
  32.   }, {
  33.     x: 10,
  34.     y: 650
  35.   },
  36.   {
  37.     x: 11,
  38.     y: 1350
  39.   }, {
  40.     x: 12,
  41.     y: 200
  42.   },
  43.   {
  44.     x: 13,
  45.     y: 12782
  46.   }, {
  47.     x: 14,
  48.     y: 1000
  49.   },
  50.   {
  51.     x: 15,
  52.     y: 50
  53.   }, {
  54.     x: 16,
  55.     y: 500
  56.   },
  57.   {
  58.     x: 17,
  59.     y: 204
  60.   }, {
  61.     x: 18,
  62.     y: 15
  63.   },
  64.   {
  65.     x: 19,
  66.     y: 250
  67.   }, {
  68.     x: 20,
  69.     y: 1200
  70.   },
  71.   {
  72.     x: 21,
  73.     y: 200
  74.   }, {
  75.     x: 22,
  76.     y: 200
  77.   },
  78.   {
  79.     x: 23,
  80.     y: 100
  81.   }, {
  82.     x: 24,
  83.     y: 200
  84.   },
  85.   {
  86.     x: 25,
  87.     y: 450
  88.   }
  89. ]
  91. async function createGraphData() {
  92.   const ctx = document.getElementById('myChart').getContext('2d');
  93.   const myChart = new Chart(ctx, {
  94.     type: 'bar',
  95.     data: {
  96.       datasets: [{
  97.         label: '# of Tokens',
  98.         data: chartData,
  99.         backgroundColor: 'rgb(255,165,3,0.8)',
  100.       }]
  101.     },
  102.     options: {
  103.       legend: {
  104.         display: false
  105.       },
  106.       scales: {
  107.         x: {
  108.           type: 'linear',
  109.           position: 'bottom',
  110.           min: 0,
  111.           max: 25,
  112.           ticks: {
  113.             stepSize: 1,
  114.             color: 'white',
  115.             autoSkip: false,
  116.           },
  117.           title: {
  118.             display: true,
  119.             text: 'Price $ (USD)',
  120.             color: 'white'
  121.           }
  122.         },
  123.         y: {
  124.           beginAtZero: true,
  125.           grid: {
  126.             color: 'rgba(50,50,50,0.5)',
  127.             z: 1
  128.           },
  129.           title: {
  130.             display: true,
  131.             text: 'Number of Tokens',
  132.             color: 'white'
  133.           },
  134.           ticks: {
  135.             color: 'white'
  136.           }
  137.         }
  138.       },
  139.       plugins: {
  140.         legend: {
  141.           display: false,
  142.           labels: {
  143.             color: 'white'
  144.           }
  145.         },
  146.         title: {
  147.           display: true,
  148.           text: 'Chart Title',
  149.           color: 'white',
  150.           font: {
  151.             size: 24
  152.           }
  153.         }
  154.       },
  155.       maintainAspectRatio: false,
  156.       responsive: true,
  157.       barPercentage: 0.7,
  158.       categoryPercentage: 0.8,
  159.     }
  160.   });
  161. }
  163. createGraphData().catch(console.error);

个字符

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com