如何在Chart.js中更改特定y轴的颜色？

k3bvogb1  于 2023-04-20  发布在  Chart.js
关注(0)|答案(1)|浏览(229)

我正在使用Chart.js创建一个折线图，该折线图显示两个具有不同y轴的数据集。我想更改其中一个y轴的颜色，x轴包含从1开始的测试数量，所以x轴上的第一个刻度是1，最后一个刻度随着autoSkip和maxTicksLimit的使用而变化，所以有时最后一个刻度不在第二个y轴上

  1. const rootStyles = getComputedStyle(document.documentElement);
  2.     const mainColor = rootStyles.getPropertyValue('--main-color');
  3.     const subColor = rootStyles.getPropertyValue('--sub-color');
  4.     const data = {
  5.         labels: [] as number[],
  6.         datasets: [
  7.             {
  8.                 label: 'WPM',
  9.                 data: [] as number[],
  10.                 fill: true,
  11.                 backgroundColor: mainColor,
  12.                 borderColor: mainColor,
  13.                 lineTension: 0.4,
  14.                 yAxisID: 'y',
  15.             },
  16.             {
  17.                 label: 'Accuracy',
  18.                 data: [] as number[],
  19.                 fill: true,
  20.                 backgroundColor: subColor,
  21.                 borderColor: subColor,
  22.                 lineTension: 0.4,
  23.                 yAxisID: 'y1',
  24.             },
  25.         ],
  26.     };
  28.     const options: any = {
  29.         tooltips: {
  30.             enabled: true,
  31.             mode: 'label',
  32.         },
  33.         bezierCurve: true,
  34.         responsive: true,
  35.         maintainAspectRatio: false,
  36.         plugins: {
  37.             legend: {
  38.                 position: 'top',
  39.                 display: false,
  40.                 labels: {
  41.                     usePointStyle: true,
  42.                     font: {
  43.                         size: 14,
  44.                         family: 'lexend, sans-serif',
  45.                     },
  46.                 },
  47.             },
  48.             title: {
  49.                 display: false,
  50.             },
  51.         },
  52.         interaction: {
  53.             intersect: false,
  54.         },
  55.         scales: {
  56.             x: {
  57.                 title: {
  58.                     display: true,
  59.                     text: 'Test',
  60.                     color: subColor,
  61.                     font: {
  62.                         size: 16,
  63.                         family: 'lexend, sans-serif',
  64.                     },
  65.                 },
  66.                 ticks: {
  67.                     autoSkip: true,
  68.                     maxTicksLimit: 10,
  69.                     font: {
  70.                         family: 'lexend, sans-serif',
  71.                     },
  72.                     color: subColor
  73.                 },
  74.                 grid: {
  75.                     color: (context: any) => {
  76.                         if (context.tick.value === data.labels[data.labels.length - 2] // here is the problem
  77.                            || context.tick.value === 0)
  78.                         {
  79.                             return subColor
  80.                         }
  81.                         else {
  82.                             return subColor + "15"
  83.                         }
  84.                     },
  85.                 },
  86.             },
  87.             y: {
  88.                 min: 0,
  89.                 max: Math.max(...wpmData) > 150 ? 290 : 200,
  90.                 position: 'left',
  91.                 title: {
  92.                     display: true,
  93.                     text: 'Words per minute',
  94.                     color: subColor,
  95.                     font: {
  96.                         size: 16,
  97.                         family: 'lexend, sans-serif',
  98.                     },
  99.                 },
  100.                 ticks: {
  101.                     font: {
  102.                         family: 'lexend, sans-serif',
  103.                     },
  104.                     color: subColor,
  106.                 },
  107.                 grid: {
  108.                     color: (context: any) => {
  109.                         if (context.tick.value === 0) {
  110.                             return subColor
  111.                         }
  112.                         else {
  113.                             return subColor + "15"
  114.                         }
  115.                     },
  116.                 },
  117.             },
  118.             y1: {
  119.                 position: 'right',
  120.                 max: 120,
  121.                 min: 0,
  122.                 title: {
  123.                     display: true,
  124.                     text: 'Accuracy',
  125.                     color: subColor,
  126.                     font: {
  127.                         size: 16,
  128.                         family: 'lexend, sans-serif',
  129.                     },
  130.                 },
  131.                 ticks: {
  132.                     font: {
  133.                         family: 'lexend, sans-serif',
  134.                     },
  135.                     color: subColor,
  136.                 },
  137.                 grid: {
  138.                     color: (context: any) => {
  139.                         if (context.tick.value === 0) {
  140.                             return subColor
  141.                         }
  142.                         else {
  143.                             return "transparent"
  144.                         }
  145.                     },
  146.                 },
  147.             },
  148.         },
  149.         elements: {
  150.             point: {
  151.                 radius: 2,
  152.             },
  153.         },

请注意，我不想为gridLines着色

当前

预期

chart.js

1条答案

按热度按时间
ht4b089n

ht4b089n1#

假设你使用的是Chart.js 4，你可以在scales配置中使用border节点。

  1. const ctx = document.getElementById('myChart').getContext('2d');
  2. const myChart = new Chart(ctx, {
  3.   type: 'line',
  4.   data: {
  5.     labels: ['1', '2', '3', '4', '5', '6', '7'],
  6.     datasets: [{
  7.       label: 'Sales',
  8.       data: [12, 19, 3, 5, 2, 3, 14],
  9.       borderWidth: 3,
  10.       yAxisID: 'y'
  11.     }, {
  12.       label: 'Purchases',
  13.       data: [10, 40, 30, 1, 1, 13, 8],
  14.       borderWidth: 3,
  15.       yAxisID: 'y1'
  16.     }],
  17.   },
  18.   options: {
  19.     scales: {
  20.       x: {
  21.         ticks: {
  22.           color: 'red'
  23.         },
  24.         grid: {
  25.           display: false
  26.         },
  27.         border: {
  28.           color: 'red',
  29.         }
  30.       },
  31.       y: {
  32.         ticks: {
  33.           color: 'red'
  34.         },
  35.         grid: {
  36.           display: false
  37.         },
  38.         border: {
  39.           color: 'red',
  40.         }
  41.       },
  42.       y1: {
  43.         position: 'right',
  44.         ticks: {
  45.           color: 'red'
  46.         },
  47.         grid: {
  48.           display: false
  49.         },
  50.         border: {
  51.           color: 'red',
  52.         }
  53.       }
  54.     },
  55.   },
  56. });
  1. .myChartDiv {
  2.   max-width: 600px;
  3.   max-height: 400px;
  4. }
  1. <script src="https://npmcdn.com/chart.js@latest/dist/chart.umd.js"></script>
  2. <div class="myChartDiv">
  3.   <canvas id="myChart" width="600" height="400"></canvas>
  4. </div>

编辑：如果你想让所有图表示例都使用相同的颜色，你也可以考虑在图表默认值中设置borderColor：

  1. Chart.defaults.borderColor = 'red';
展开查看全部
赞(0）分享  回复(0）举报  2023-04-20
我来回答

相关问题

    查看更多

    热门标签

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

    最新问答

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