【Highcharts-react】:如何创建这样的图表

z4iuyo4d  于 2023-10-20  发布在  Highcharts
关注(0)|答案(2)|浏览(180)

我已经看过了所有的文档,但我仍然不能像这样自定义Y轴。
我需要固定年份时间序列,只需要显示10个点,我可以调整标题像“1999-2000”
这是我当前的配置:

  1. {
  2. chart: {
  3. type: "bar",
  4. stacked: true,
  5. },
  6. xAxis: {
  7. categories: ["Country 1", "Country 2", "Country 3", "Country 4"],
  8. },
  9. plotOptions: {
  10. series: {
  11. stacking: "percent",
  12. dataLabels: {
  13. enabled: false,
  14. },
  15. },
  16. },
  17. series: [
  18. {
  19. name: "No-adopted",
  20. data: [1, 0, 0, 0, 0],
  21. color: "#B7B7B7",
  22. },
  23. {
  24. name: "Adopted",
  25. data: [10, 0, 0, 0, 0],
  26. color: "#861086",
  27. },
  28. ],
  29. };

这是目前的看法:

谢谢你的帮助!

xkftehaa

xkftehaa1#

您可以使用yAxis.tickPositioneryAxis.labels.formatter函数来实现您想要实现的结果。举例来说:

  1. yAxis: {
  2. showFirstLabel: false,
  3. showLastLabel: false,
  4. tickPositioner: function() {
  5. const first = 1971;
  6. const step = 5;
  7. const min = 1968;
  8. const max = 2016;
  9. const ticks = [min];
  10. for (let tick = first; tick <= max; tick += step) {
  11. ticks.push(tick);
  12. }
  13. ticks.push(2018);
  14. return ticks;
  15. },
  16. labels: {
  17. autoRotation: false,
  18. style: {
  19. fontSize: 11
  20. },
  21. formatter: function() {
  22. return this.value + '-' + (this.value + 4)
  23. }
  24. }
  25. }

现场演示:https://jsfiddle.net/BlackLabel/2gr1L493/
API引用:

https://api.highcharts.com/highcharts/xAxis.labels.formatter
https://api.highcharts.com/highcharts/xAxis.tickPositioner

展开查看全部
kwvwclae

kwvwclae2#

更新

嘿,对不起,愚蠢的答案没有阅读你的问题足够接近。我回去做了一些研究,但没有找到一个好的方法来实现这一点。但是,我能够让它接近您提供的屏幕截图-通过在yaxis中使用tickIntervalcategories的组合:

  1. yAxis: {
  2. min: 0,
  3. max: 100,
  4. tickInterval: 10,
  5. categories: [
  6. '',
  7. ...Array(10).fill('1971-1975'),
  8. ...Array(10).fill('1976-1980'),
  9. ...Array(10).fill('1981-1985'),
  10. ...Array(10).fill('1986-1990'),
  11. ...Array(10).fill('1991-1995'),
  12. ...Array(10).fill('1996-2000'),
  13. ...Array(10).fill('2001-2005'),
  14. ...Array(10).fill('2006-2010'),
  15. ...Array(10).fill('2011-2015'),
  16. ...Array(10).fill('2016-2020')
  17. ]
  18. },

我重复同样的事情10次,使其总数为100 + 1(索引0)次,以填写所有的y轴(总数为100,由于是一个百分比)。
优雅?绝对不是,但我无法找到解决这个问题的正确方法。
下面是codesandbox演示:https://codesandbox.io/s/cranky-wescoff-lvk9j2?file=/src/Example.tsx

展开查看全部

相关问题