1. <tfoot id='HQfx6'></tfoot>
      1. <legend id='HQfx6'><style id='HQfx6'><dir id='HQfx6'><q id='HQfx6'></q></dir></style></legend>

      2. <i id='HQfx6'><tr id='HQfx6'><dt id='HQfx6'><q id='HQfx6'><span id='HQfx6'><b id='HQfx6'><form id='HQfx6'><ins id='HQfx6'></ins><ul id='HQfx6'></ul><sub id='HQfx6'></sub></form><legend id='HQfx6'></legend><bdo id='HQfx6'><pre id='HQfx6'><center id='HQfx6'></center></pre></bdo></b><th id='HQfx6'></th></span></q></dt></tr></i><div id='HQfx6'><tfoot id='HQfx6'></tfoot><dl id='HQfx6'><fieldset id='HQfx6'></fieldset></dl></div>

        <small id='HQfx6'></small><noframes id='HQfx6'>

          <bdo id='HQfx6'></bdo><ul id='HQfx6'></ul>

        ChartJS 仅显示特定刻度的大字体

        时间:2023-11-01
        <i id='yhwKP'><tr id='yhwKP'><dt id='yhwKP'><q id='yhwKP'><span id='yhwKP'><b id='yhwKP'><form id='yhwKP'><ins id='yhwKP'></ins><ul id='yhwKP'></ul><sub id='yhwKP'></sub></form><legend id='yhwKP'></legend><bdo id='yhwKP'><pre id='yhwKP'><center id='yhwKP'></center></pre></bdo></b><th id='yhwKP'></th></span></q></dt></tr></i><div id='yhwKP'><tfoot id='yhwKP'></tfoot><dl id='yhwKP'><fieldset id='yhwKP'></fieldset></dl></div>

            <tbody id='yhwKP'></tbody>
        1. <legend id='yhwKP'><style id='yhwKP'><dir id='yhwKP'><q id='yhwKP'></q></dir></style></legend>

              • <bdo id='yhwKP'></bdo><ul id='yhwKP'></ul>
                <tfoot id='yhwKP'></tfoot>

                <small id='yhwKP'></small><noframes id='yhwKP'>

                • 本文介绍了ChartJS 仅显示特定刻度的大字体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  如果满足特定条件,我试图强调 X 轴上的特定值.

                  例如,在我的 codepen 中,我只想更改 ' 的字体大小蓝色'酒吧.Chart.js 甚至可以做到这一点吗?

                  var ctx = document.getElementById("myChart").getContext('2d');var myChart = new Chart(ctx, {类型:'酒吧',数据: {标签:[红色",蓝色",黄色",绿色",紫色",橙色"],数据集:[{标签:'投票数',数据:[12、19、3、5、2、3],背景颜色: ['rgba(255, 99, 132, 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(255,99,132,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)'],边框宽度:1}]},选项: {秤:{y轴:[{滴答声:{开始零:真}}],x轴:[{滴答声:{//仅显示蓝色"的大字体字体大小:16}}]}}});

                  解决方案

                  Chartjs 没有公共 api 来执行此操作,但您可以在 _ticks/www.chartjs.org/docs/latest/developers/plugins.html#plugin-core-api" rel="nofollow noreferrer">beforeDraw 并将标签Blue"设为major: true 那么该标签将使用 major 标记配置选项中的样式.

                  还要谨慎使用它,因为它依赖于内部实现,因此可能会在未来的版本中中断(不太可能发生,只是说一下).

                  var ctx = document.getElementById("myChart").getContext('2d');var myChart = new Chart(ctx, {类型:'酒吧',数据: {标签:[红色",蓝色",黄色",绿色",紫色",橙色"],数据集:[{标签:'投票数',数据:[12、19、3、5、2、3],背景颜色: ['rgba(255, 99, 132, 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(255,99,132,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)'],边框宽度:1}]},选项: {秤:{y轴:[{滴答声:{开始零:真}}],x轴:[{滴答声:{字体大小:16,重大的: {字体大小:20}}}]}},插件:[{beforeDraw:函数({图表},选项){图表框.find(box => box.id === "x-axis-0")._ticks.find(tick => tick.label === "蓝色").major =真;}}]});

                  <canvas id="myChart"></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

                  PS:以防有人想知道我是如何知道这个内部实现的,我在 chartjs github 源代码和 console.log(myChart) xD

                  fillText>

                  I am attempting to emphasize a specific value on the X-Axis if it meets a specific condition.

                  For example, in my codepen I want to only change the font size of the 'blue' bar. Is this even possible with Chart.js?

                  var ctx = document.getElementById("myChart").getContext('2d');
                  var myChart = new Chart(ctx, {
                      type: 'bar',
                      data: {
                          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                          datasets: [{
                              label: '# of Votes',
                              data: [12, 19, 3, 5, 2, 3],
                              backgroundColor: [
                                  'rgba(255, 99, 132, 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)'
                              ],
                              borderColor: [
                                  'rgba(255,99,132,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)'
                              ],
                              borderWidth: 1
                          }]
                      },
                      options: {
                          scales: {
                              yAxes: [{
                                  ticks: {
                                      beginAtZero:true
                                  }
                              }],
                              xAxes: [{
                                  ticks: {
                                      //only show large font size for 'Blue'
                                      fontSize: 16
                                  }
                              }]
                          }
                      }
                  });
                  

                  解决方案

                  Chartjs doesn't have a public api to do this but you can modify internal _ticks on beforeDraw and make the label "Blue" as major: true then that label will be drawn using the major styling in tick configuration options.

                  Also use this with caution since it relies on internal implementation and thus might break in future releases (very unlikely to happen but just saying).

                  var ctx = document.getElementById("myChart").getContext('2d');
                  var myChart = new Chart(ctx, {
                      type: 'bar',
                      data: {
                          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                          datasets: [{
                              label: '# of Votes',
                              data: [12, 19, 3, 5, 2, 3],
                              backgroundColor: [
                                  'rgba(255, 99, 132, 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)'
                              ],
                              borderColor: [
                                  'rgba(255,99,132,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)'
                              ],
                              borderWidth: 1
                          }]
                      },
                      options: {
                          scales: {
                              yAxes: [{
                                  ticks: {
                                      beginAtZero:true
                                  }
                              }],
                              xAxes: [{
                                  ticks: {
                                      fontSize: 16,
                                      major: {
                                        fontSize: 20
                                      }
                                  }
                              }]
                          }
                      }, 
                      plugins: [{
                          beforeDraw: function({ chart }, options) {
                              chart.boxes
                              .find(box => box.id === "x-axis-0")
                              ._ticks
                              .find(tick => tick.label === "Blue")
                              .major = true;
                          }
                      }]
                  });

                  <canvas id="myChart"></canvas>
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

                  PS: Just in case someone is wondering how I know this internal implementation I searched fillText in chartjs github source code and console.log(myChart) xD

                  这篇关于ChartJS 仅显示特定刻度的大字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:图表js中饼图之间的填充 下一篇:chart.js 中多个图表上的工具提示显示错误的值

                  相关文章

                • <i id='3WRsX'><tr id='3WRsX'><dt id='3WRsX'><q id='3WRsX'><span id='3WRsX'><b id='3WRsX'><form id='3WRsX'><ins id='3WRsX'></ins><ul id='3WRsX'></ul><sub id='3WRsX'></sub></form><legend id='3WRsX'></legend><bdo id='3WRsX'><pre id='3WRsX'><center id='3WRsX'></center></pre></bdo></b><th id='3WRsX'></th></span></q></dt></tr></i><div id='3WRsX'><tfoot id='3WRsX'></tfoot><dl id='3WRsX'><fieldset id='3WRsX'></fieldset></dl></div>
                  <tfoot id='3WRsX'></tfoot>

                      <small id='3WRsX'></small><noframes id='3WRsX'>

                        <bdo id='3WRsX'></bdo><ul id='3WRsX'></ul>
                      <legend id='3WRsX'><style id='3WRsX'><dir id='3WRsX'><q id='3WRsX'></q></dir></style></legend>