Chart.js 3.7.1 移除左侧带有数值的刻度。

huangapple go评论82阅读模式
英文:

Chart.js 3.7.1 remove the scale on the left with values

问题

如何关闭在截图中我标记的从0到45000的附加刻度?我已经尝试了一切可能的方法。似乎可以将Chart.js更新到最新版本,但我对在版本3.7.1中更正行为的可能性感兴趣。还存在一个问题,在最顶部的那个点上,100%的值标签被切掉了,我也找不到如何修复它。

选项:

export const chartOptions: ICustomChartOptions = {
  responsive: true,
  layout: {},
  elements: {
    bar: {
      borderRadius: 4,
    },
    line: {
      borderWidth: 3,
    },
    point: {
      backgroundColor: '#FFFFFF',
      borderWidth: 2,
      radius: 4,
    },
  },
  clip: false,
  scales: {
    x: {
      grid: {
        display: false,
      },
      ticks: {
        font: {
          size: 10,
        },
      },
      min: 0,
      max: 100000,
    },
    y: {
      position: 'left',
      grid: {
        drawBorder: false,
      },
      ticks: {
        callback: function (value) {
          return `${value}%`;
        },
        stepSize: 25,
        font: {
          size: 10,
        },
      },
      min: 0,
      max: 100,
      beginAtZero: true,
    },
  },
  plugins: {},
};

更新:这是图表的数据

export const chartData: ChartData<'line'> = {
  labels: chartLabels,
  datasets: [
    {
      type: 'line',
      // yAxisID: 'line',
      data: [100, 20, 49, 10, 97],
      order: 1,
      datalabels: {
        anchor: 'start',
        align: 'end',
        color: color['Purple/Purple 80'],
        formatter(value) {
          return `${value}%`;
        },
      },
    },
    {
      type: 'bar' as 'line',
      yAxisID: 'bar',
      data: [22000, 17500, 12000, 10000, 44000],
      order: 2,
      datalabels: {
        align: 'end',
      },
    },
  ],
};

更新2
用于显示值,我使用了ChartDataLabels插件。

英文:

Chart.js 3.7.1 移除左侧带有数值的刻度。

How to turn off the scale with additional marks from 0 to 45000 which I highlighted in the screenshot? I have tried everything possible.
it seems that it is possible to update chartjs to the latest version, but I'm interested in the possibility of correcting the behavior in version 3.7.1
there is also a problem that at the point at the very top where 100% the label with a value of 100 of this point is cut off, until I also found how to fix it.

Options:

export const chartOptions: ICustomChartOptions = {
  responsive: true,
  layout: {},
  elements: {
    bar: {
      borderRadius: 4,
    },
    line: {
      borderWidth: 3,
    },
    point: {
      backgroundColor: &#39;#FFFFFF&#39;,
      borderWidth: 2,
      radius: 4,
    },
  },
  clip: false,
  scales: {
    x: {
      grid: {
        display: false,
      },
      ticks: {
        font: {
          size: 10,
        },
      },
      min: 0,
      max: 100000,
    },
    y: {
      position: &#39;left&#39;,
      grid: {
        drawBorder: false,
      },
      ticks: {
        callback: function (value) {
          return `${value}%`;
        },
        stepSize: 25,
        font: {
          size: 10,
        },
      },
      min: 0,
      max: 100,
      beginAtZero: true,
    },
  },
  plugins: {},
};

UPD: This is data for chart

export const chartData: ChartData&lt;&#39;line&#39;&gt; = {
  labels: chartLabels,
  datasets: [
    {
      type: &#39;line&#39;,
      // yAxisID: &#39;line&#39;,
      data: [100, 20, 49, 10, 97],
      order: 1,
      datalabels: {
        anchor: &#39;start&#39;,
        align: &#39;end&#39;,
        color: color[&#39;Purple/Purple 80&#39;],
        formatter(value) {
          return `${value}%`;
        },
      },
    },
    {
      type: &#39;bar&#39; as &#39;line&#39;,
      yAxisID: &#39;bar&#39;,
      data: [22000, 17500, 12000, 10000, 44000],
      order: 2,
      datalabels: {
        align: &#39;end&#39;,
      },
    },
  ],
};

UPD 2
for display values, i use ChartDataLabels

答案1

得分: 1

以下是您要翻译的内容:

"Without the data, one can't be sure how the second axis comes to be, but I'll suppose that it is the axis for the type: &quot;bar&quot; part of a mixed chart. Therefore, the data might be something on the lines of (I'll spare the typings, as this is too imprecise for that):

const data = {
   labels: [....],
   datasets: [
       {
          type: &quot;line&quot;,
          label: &quot;....&quot;,
          data: [.....]
       },
       {
          type: &quot;bar&quot;,
          label: &quot;....&quot;,
          data: [.....]
       },
   ]
}

In this case, you'll have to set the y axes ids for the two parts and, in options set display: false for the axis you don't want to show:

const data = {
   labels: [....],
   datasets: [
       {
          type: &quot;line&quot;,
          label: &quot;....&quot;,
          data: [.....],
          yAxisID: &quot;y&quot;
       },
       {
          type: &quot;bar&quot;,
          label: &quot;....&quot;,
          data: [.....],
          yAxisID: &quot;y2&quot;
       }
   ]
};

const chartOptions = {
   //....... other options
   scales:{
      x: { 
         // .... options for the x axis
      },
      y: { 
         // .... options for the y axis 
      },
      y2:{
         display: false,
         // ... other y2 options, if any
      }
   }
}

Here's a snippet with a minimal version of the code doing that:


const data = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [
        {
            label: 'lines',
            data: [100, 20, 40, 50, 90, 44, 29],
            type: 'line',
            order: 1,
            yAxisID: 'y'
        },
        {
            label: 'bars',
            data: [10009, 2000, 4000, 5000, 9000, 4400, 2900],
            type: 'bar',
            order: 0,
            yAxisID: 'y2'
        }
    ]
};

const options = {
    scales:{
        y: {
            beginAtZero: false,
            //grace: "2%"
        },
        y2: {
            display: false,
        }
    },
    layout: {
        padding: {top: 10} // to fit the label
    }
}
new Chart(document.getElementById('chart1'), {data, options});

<div style="height: 100%; width:100%">
<canvas id="chart1"  style="height: 90vh; width:95vw"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

As for fitting the label, again, we don't know how you added them. You may try:

  • options.layout.padding.top docs link (see the example above),
  • options.scales.y.grace docs link (commented in the example above)
  • or simply increasing the maximum (max) of the y scale according to data."
英文:

Without the data, one can't be sure how the second axis comes to be, but I'll suppose that it is the axis for the type: &quot;bar&quot; part of a mixed chart. Therefore, the data might be something on the lines of (I'll spare the typings, as this is too imprecise for that):

const data = {
   labels: [....],
   datasets: [
       {
          type: &quot;line&quot;,
          label: &quot;....&quot;,
          data: [.....]
       },
       {
          type: &quot;bar&quot;,
          label: &quot;....&quot;,
          data: [.....]
       },
   ]
}

In this case, you'll have to set the y axes ids for the two parts and, in options set display: false for the axis you don't want to show:

const data = {
   labels: [....],
   datasets: [
       {
          type: &quot;line&quot;,
          label: &quot;....&quot;,
          data: [.....],
          yAxisID: &quot;y&quot;
       },
       {
          type: &quot;bar&quot;,
          label: &quot;....&quot;,
          data: [.....],
          yAxisID: &quot;y2&quot;
       }
   ]
};

const chartOptions = {
   //....... other options
   scales:{
      x: { 
         // .... options for the x axis
      },
      y: { 
         // .... options for the y axis 
      },
      y2:{
         display: false,
         // ... other y2 options, if any
      }
   }
}

Here's a snippet with a minimal version of the code doing that:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const data = {
    labels: [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;E&#39;, &#39;F&#39;, &#39;G&#39;],
    datasets: [
        {
            label: &#39;lines&#39;,
            data: [100, 20, 40, 50, 90, 44, 29],
            type: &#39;line&#39;,
            order: 1,
            yAxisID: &#39;y&#39;
        },
        {
            label: &#39;bars&#39;,
            data: [10009, 2000, 4000, 5000, 9000, 4400, 2900],
            type: &#39;bar&#39;,
            order: 0,
            yAxisID: &#39;y2&#39;
        }
    ]
};

const options = {
    scales:{
        y: {
            beginAtZero: false,
            //grace: &quot;2%&quot;
        },
        y2: {
            display: false,
        }
    },
    layout: {
        padding: {top: 10} // to fit the label
    }
}
new Chart(document.getElementById(&#39;chart1&#39;), {data, options});

<!-- language: lang-html -->

&lt;div style=&quot;height: 100%; width:100%&quot;&gt;
&lt;canvas id=&quot;chart1&quot;  style=&quot;height: 90vh; width:95vw&quot;&gt;&lt;/canvas&gt;
&lt;/div&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js&quot; integrity=&quot;sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

As for fitting the label, again, we don't know how you added them. You may try:

  • options.layout.padding.top docs link (see the example above),
  • options.scales.y.grace docs link (commented in the example above)
  • or simply increasing the maximum (max) of the y scale according to data.

huangapple
  • 本文由 发表于 2023年6月19日 21:34:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76507156.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定