Android Highchart 条形图在条形下方添加文本 [英] Android Highchart bar chart add a text below a bar
本文介绍了Android Highchart 条形图在条形下方添加文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的 Android 应用程序中显示一个带有数据标签的 条形图
.highchart
仅排除数值,尽管我尝试使用字符串作为图表不呈现的值.下面是我的代码
I am displaying a bar chart
in my android app with data labels. The highchart
excepts only numeric value, although I have tried to use string as values the chart doesn't render. Below is my code
public void golyChartView(Number prev,Number curr)
{
HIOptions options = new HIOptions();
HIChart chart = new HIChart();
chart.setType("bar");
options.setChart(chart);
HITitle title = new HITitle();
title.setText("GOLY");
options.setTitle(title);
HISubtitle subtitle = new HISubtitle();
subtitle.setText("Growth Over Last Year");
options.setSubtitle(subtitle);
HIXAxis xaxis = new HIXAxis();
String[] categories = new String[] { "2020", "2021"};
xaxis.setCategories(new ArrayList<>(Arrays.asList(categories)));
options.setXAxis(new ArrayList<HIXAxis>(){{add(xaxis);}});
HIYAxis yaxis = new HIYAxis();
yaxis.setMin(0);
yaxis.setTitle(new HITitle());
yaxis.getTitle().setText("Sale Amount");
yaxis.getTitle().setAlign("high");
yaxis.setLabels(new HILabels());
yaxis.getLabels().setOverflow("justify");
options.setYAxis(new ArrayList<HIYAxis>(){{add(yaxis);}});
HITooltip tooltip = new HITooltip();
options.setTooltip(tooltip);
HILegend legend = new HILegend();
legend.setLayout("vertical");
legend.setAlign("right");
legend.setVerticalAlign("top");
legend.setX(-30);
legend.setY(40);
legend.setFloating(true);
legend.setBorderWidth(1);
legend.setBackgroundColor(HIColor.initWithHexValue("FFFFFF"));
legend.setShadow(true);
options.setLegend(legend);
HICredits credits = new HICredits();
credits.setEnabled(false);
options.setCredits(credits);
HIBar bar1 = new HIBar();
bar1.setName("Sale Value");
Number[] bar1Data = new Number[]{prev,curr};
bar1.setColorByPoint(true);
bar1.setData(new ArrayList<>(Arrays.asList(bar1Data)));
float numb = (((float)curr - (float)prev)/(float)prev)*100;
String percentage = String.valueOf(numb);
HIDataLabels dataLabels = new HIDataLabels();
dataLabels.setEnabled(true);
ArrayList<HIDataLabels> dataLabelsList = new ArrayList<>();
dataLabelsList.add(dataLabels);
bar1.setDataLabels(dataLabelsList);
HIDataLabels hiDataLabels = new HIDataLabels();
hiDataLabels.setEnabled(true);
HILegend hiLegend = new HILegend();
hiLegend.setEnabled(false);
options.setLegend(hiLegend);
options.setSeries(new ArrayList<>(Collections.singletonList(bar1)));
HIExporting exporting = new HIExporting();
exporting.setEnabled(false);
options.setExporting(exporting);
golyChart.setOptions(options);
golyChart.update(options,true,false);
}
输出
我想做什么?
如上面的代码所示,我有一个 percentage
的字符串,我想在第二个栏下方添加它
As shown in the above code I have a string of percentage
, that I want to add below the second bar Like below
我坚持不知道该怎么办
任何帮助将不胜感激.
推荐答案
你可以使用 文本渲染器 在栏旁边添加文本.
You could use text Renderer to add text next to the bar.
我不知道 android-highcharts,但在 javascript 中,这里有一个 example
I don't know android-highcharts but in javascript here an example
let customLabel,
labelInit = false;
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
render: function () {
const chart = this,
point = chart.series[0].data[1];
// prevent multiple label creation if used in render event but useless in "load" event
if (labelInit) customLabel.destroy();
customLabel = chart.renderer.text('+25 %', point.shapeArgs.height, point.tooltipPos[1] + chart.series[0].itemWidth + 10)
.add()
.attr({
zIndex: 3
});
labelInit = true;
}
}
},
title:{
text: "GOLY"
},
plotOptions: {
bar: {
grouping: false
}
},
xAxis: {
type: "category",
categories: ["2020", "2021"]
},
series: [{
data: [200, 400],
colorByPoint: true
}]
});
这篇关于Android Highchart 条形图在条形下方添加文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文