Custom label on top of the Highchart using swift and highchart cocoapods

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

Custom label on top of the Highchart using swift and highchart cocoapods

问题

I have Column chart in which i want to show rank of the chart on top of the column . i tried to show dataLabels but it only shows y value on the top. is that any way to add custom label on the top?

我有一个柱状图,我想在柱子的顶部显示排名。我尝试显示数据标签,但它只显示顶部的Y值。是否有办法在顶部添加自定义标签?

i tried to find answer on Highchart forums and Github forums for the same.please help me out with the code example.

我尝试在Highchart论坛和GitHub论坛上寻找答案,希望您能提供代码示例来帮助我。

Current column chart

当前的柱状图

i want to show custom value on top of the colomn.

我想在柱子的顶部显示自定义值。

let column = HIColumn()
column.data = arySerisModel[i].aryData
where 'arydata' is an array of float values.

我想要在柱子的中间显示另一个数组中的值:[1,1,2,3,3,4,5,6,6,7]

英文:

I have Column chart in which i want to show rank of the chart on top of the column . i tried to show dataLabels but it only shows y value on the top. is that any way to add custom label on the top?

i tried to find answer on Highchart forums and Github forums for the same.please help me out with the code example.

Current column chart

i want to show custom value on top of the colomn.

  1. let column = HIColumn()
  2. column.data = arySerisModel[i].aryData

where 'arydata' is array of float values.

i have another array = [1,1,2,3,3,4,5,6,6,7]
which i want to show on middle of column.

答案1

得分: 0

你可以使用dataLabels.format属性或dataLabels.formatter()回调函数来设置自定义标签文本。

  1. plotOptions: {
  2. series: {
  3. dataLabels: {
  4. enabled: true,
  5. format: '自定义标签'
  6. }
  7. }
  8. }

在Swift中实现这个功能会像这样:

  1. let options = HIOptions()
  2. let plotOptions = HIPlotOptions()
  3. plotOptions.series = HISeries()
  4. let dataLabels = HIDataLabels()
  5. dataLabels.enabled = true
  6. dataLabels.formatter = HIFunction(jsFunction: "function() { const point = this.point, customLabel = point.customLabel; return `${customLabel ? customLabel : point.y}`; }")
  7. plotOptions.series.dataLabels = [dataLabels]
  8. options.plotOptions = plotOptions
  9. let series = HISeries()
  10. series.data = [
  11. ["y": 29.9],
  12. ["y": 71.5, "customLabel": "自定义 A"],
  13. ["y": 129.2, "customLabel": "自定义 B"],
  14. ["y": 144]
  15. ]
  16. options.series = [series]

演示: https://jsfiddle.net/BlackLabel/afub368p/
文档: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
API: https://api.highcharts.com/highcharts/series.pie.dataLabels.format

英文:

You can use the dataLabels.format property or the dataLabels.formatter() callback function to set custom label text.

  1. plotOptions: {
  2. series: {
  3. dataLabels: {
  4. enabled: true,
  5. format: 'Custom label'
  6. }
  7. }
  8. },

Implementing this in Swift will look like this:

  1. let options = HIOptions()
  2. let plotOptions = HIPlotOptions()
  3. plotOptions.series = HISeries()
  4. let dataLabels = HIDataLabels()
  5. dataLabels.enabled = true
  6. dataLabels.formatter = HIFunction(jsFunction: "function() { const point = this.point, customLabel = point.customLabel; return `${customLabel ? customLabel : point.y}`; }")
  7. plotOptions.series.dataLabels = [dataLabels]
  8. options.plotOptions = plotOptions
  9. let series = HISeries()
  10. series.data = [
  11. ["y": 29.9],
  12. ["y": 71.5, "customLabel": "Custom A"],
  13. ["y": 129.2, "customLabel": "Custom B"],
  14. ["y": 144]
  15. ]
  16. options.series = [series]

Demo: https://jsfiddle.net/BlackLabel/afub368p/ <br/>
Docs: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting <br/>
API: https://api.highcharts.com/highcharts/series.pie.dataLabels.format

huangapple
  • 本文由 发表于 2023年4月17日 15:10:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76032498.html
匿名

发表评论

匿名网友

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

确定