我正在尝试使用 Highcharts 的条形图。在下面的代码中,我们有 xaxis 类别,例如:['Name1', 'Name2', 'Name3', 'Name4' ]。
首先,我在 react native 中使用下面的 highcharts 代码来开发 iOS 应用程序。
我正在尝试将名称放在图表(条形图)中的每个单独的条上,这正在工作,但是当类别数组中的名称文本为 v.large 时,标题的宽度不会增加并且文本即将到来在具有最小宽度的多行中。如果名称是 v.large,那么只有我们在图表上得到虚线文本。
我们可以增加标题的宽度吗?如果是这样,我们如何增加 iPhone 宽度内的宽度。
chart: {
type: 'bar',
reflow: true,
marginRight: 30,
},
credits: {
enabled: false
},
title: {
align: "left",
text: "A comparison of the business’ digital health with that of the competitors.",
backgroundColor:'green',
style: {
color: '#808080',
fontWeight: '400',
fontSize: '13px',
}
},
xAxis: {
categories: ['Name1', 'Name2', 'Name3', 'Name4' ],
title: {
align: "left",
},
scrollbar: {
enabled: false
},
labels: {
x: 25,
y: -22,
align: 'left',
useHTML: true,
style: {
fontSize: '13px',
fontFamily: 'Open Sans',
color: '#464646',
backgroundColor: 'green',
},
},
},
yAxis: {
gridLineColor: "transparent",
stackLabels: {
qTotals: [91,99,85,99],
enabled: true,
useHTML: true,
style: {
fontWeight: "bold",
},
formatter: function () {
return this.options.qTotals[this.x];
},
},
tickInterval: 20,
labels: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'center',
enabled: false,
crop: false,
overflow: 'none',
verticalAlign: 'top',
y: -50,
style: {
fontWeight: '300',
color: '#808080',
fontSize: '30px',
}
},
pointWidth: 25,
borderWidth: 0,
pointPadding: 10,
stacking: "normal",
states: {
hover: {
enabled: false
}
},
//cursor: 'pointer',
point: {
events: {
click: function (event) {
}
}
}
}
},
series: [
{
name: "",
data: [3, 1, 15, 1],
color: "#f5f6f8",
dataLabels: {
enabled: false
},
},
{
name: "",
color: "#ff0000",
data: [{ y: 97, color: "#0f875a" }, { y: 99, color: "#0f875a" }, { y: 85, color: "#0f875a" }, { y: 99, color: "#0f875a" }]
}
],
}
对于示例,我从 Highcharts 中获取了一个图表,即条形图,在链接jsfiddle.net/psre6Lj9/1中,我们有一些水果名称,其中“Apples”宽度不够,并且文本显示在多行中。我想增加标题的宽度。我怎样才能做到这一点。