早上好
是否有可能在React-Native的HighCharts图表设置中读取包含列表的外部变量？
我正在使用组件：“ react-native-highcharts”。
我的代码：
import ChartView from 'react-native-highcharts';
render() {
this.state.dadosApi = [10, 10, 1, 3, 4, 6, 5, 7, 18, 19, 2, 13];
var exData = ['2h 30m','1h 30m','4h 30m','5h 30m','6h 30m','4h 30m','1h 30m','7h 30m','15h 30m','2h 13m','12h 30m','00h 30m'];
var Highcharts='Highcharts';
var conf={
chart: {
type: 'line',
animation: Highcharts.svg,
marginRight: 10,
tooltipArr: exData,
},
yAxis: {
title: {
useHTML: true,
text: null,
},
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF']
,
title: {
text: null
},
xAxis: {
categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
},
credits: {
enabled: false
},
series: [{
type: 'line',
name: 'Linha 1',
data: this.state.dadosApi,
marker: {
enabled: false,
},
tooltip: {
pointFormatter: function() {
var toolTip = this.series.chart.options.chart.tooltipArr;
return toolTip[this.x];
}
}
}
tooltip:
{
headerFormat: '',
}
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
}
return (
<ChartView style={{height:300}} config={conf} options={options}></ChartView>
);
变量“ exData”以“未定义”形式出现。因此，我无法在“工具提示”中加载图中每个点的小时数。
有什么办法吗？
我需要从另一个列表中加载工具提示值。我用list1中的值加载行。但是，当我单击该行时，我想打开一个工具提示，其中不包含“ line1”的值，但包含“ list2”中的相应值。
示例：如果单击“ 4”位置，则该行的值为“ 6”，但是我想在工具提示中显示等于“测试4”的文本“ list2”。 >
但是该设置表明list2的值为空。我应该如何继续以这种方式创建工具提示？
javascript
const tooltips = ['Teste 1','Teste 2','Teste 3','Teste 4','Teste 5','Teste 6','Teste 7','Teste 8','Teste 9','Teste 10','Teste 11','Teste 12'];
var conf = {
chart: {
type: 'spline',
},
title: {
text: 'Live random data'
},
tooltip: {
formatter: function () {
return this.y > 0 ? this.series.name : tooltips[0];
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF']
,
title: {
text: null
},
xAxis: {
categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
},
credits: {
enabled: false
},
series: [{
name: 'Random data',
data: this.state.dataAcionamentos,
marker: {
enabled: false,
},
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
//showLoading: true,
};
答案 0 :(得分：1)
我明白了！
我的解决方案只是为了贡献。
首先，我为两个系列创建2个数组：
for (i in myObj) {
var Label1 = 'Teste 1';
valueP = myObj[i].value;
dataList1.push({
name: Label1,
y: ValueP
});
valueAux1 = myObj[i].value;
valueAux2 = myObj[i].unit;
dataList2.push({
name: valueAux2,
y: valueAux1
});
}
结果：
dataList1 =
[
{ name: 'Teste 1', y: 61.41 },
{ name: 'Teste 1', y: 51.35 },
{ name: 'Teste 1', y: 41.00 },
{ name: 'Teste 1', y: 31.29 },
{ name: 'Teste 1', y: 21.23 },
{ name: 'Teste 1', y: 11.16 },
{ name: 'Teste 1', y: 16.19 },
{ name: 'Teste 1', y: 26.87 },
{ name: 'Teste 1', y: 36.65 },
{ name: 'Teste 1', y: 31.44 },
]
dataList2 =
[
{ name: '1h', y: 61.41 },
{ name: '2h 30m', y: 41.35 },
{ name: '2h 30m', y: 51.00 },
{ name: '22h 30m', y: 36.29 },
{ name: '4h 30m', y: 31.23 },
{ name: '12h 30m', y: 21.16 },
{ name: '4h 30m', y: 18.19 },
{ name: '6h 30m', y: 46.87 },
{ name: '7h 30m', y: 37.65 },
{ name: '9h 30m', y: 30.44 },
]
所以我加载了图形配置：
var conf = {
chart: {
type: 'column',
},
title: {
text: null
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF', 'rgb(76, 43, 228)']
,
title: {
text: null
},
yAxis: {
title: {
useHTML: true,
text: null
}
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Bar Chart',
data: dataList1,
marker: {
enabled: false,
},
tooltip: {
pointFormat: '<b>{this.series.data.y}</b>'
},
},{
type: 'line',
name: 'Line 1',
data: dataList2,
marker: {
enabled: false,
},
tooltip: {
pointFormat: '<b>{this.series.data.name}</b>'
},
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
通过这种方式，条形图将在工具提示中加载值{this.series.data.y}，而在折线图中将加载值{this.series.data.name}。
例如：
答案 1 :(得分：0)
请查看提供的示例here。 在您的情况下，您可以按以下方式定义配置：
var conf = {
chart: {
tooltipArr: exData,
},
series: [{
tooltip: {
pointFormatter: function() {
var toolTip = this.series.chart.options.chart.tooltipArr;
return toolTip[this.x];
}
}
}]
}
在您的示例中，您从以下位置获取工具提示数据：
var toolTip = this.series.chart.options.chart.tooltipArr;
可能很快导致未定义访问器之一的情况。如果您想根据收到的值自定义工具提示，则可以使用格式化程序功能。您可以使用this.x或this.y检查x和y值是什么。
如果您知道要在工具提示中显示的内容，则只需在conf对象外部声明一个const即可在工具提示格式器函数中进行访问，就像包的作者一样。
const tooltips = ['Tooltip1', 'Tooltip2'];
var conf = {
chart: {
type: 'spline',
},
title: {
text: 'Live random data'
},
tooltip: {
formatter: function () {
return this.y > 0 ? this.series.name : tooltips[0];
}
},
series: [{
name: 'Random data'
}]
}