Javascript 是否可以使用React Native HighCharts加载带有外部数据的工具提示？

早上好

是否可以在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>
);

---

请看一下提供的示例。 在本例中，您定义了如下配置：

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.tooltipar

可能很快导致某个访问器未定义的内容。如果您想根据收到的值自定义工具提示，我将使用formatter函数。您可以使用
this.x
或
this.y
检查x和y值是多少

如果您知道，您希望在工具提示中显示什么，我只需在
conf
对象外部声明一个常量，并在工具提示格式化程序函数内部进行访问，就像包的作者所做的那样

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'
  }]
}

我明白了

我的解决方案只是为了贡献

首先，我为两个系列创建了两个阵列：


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: '.'
    }
};



变量配置={
图表：{
键入：“列”，
},
标题：{
文本：空
},
导航：{
按钮选项：{
已启用：false
}
},
颜色：
[“#DA6AFF”，“rgb（76,43,228）”]
,
标题：{
文本：空
},
亚克斯：{
标题：{
是的，
文本：空
}
},
xAxis：{
类别：[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]
},
学分：{
已启用：false
},
系列：[{
键入：“列”，
名称：'条形图'，
数据：dataList1，
标记：{
启用：false，
},
工具提示：{
pointFormat:“{this.series.data.y}”
},
},{
键入：“行”，
名称：“第1行”，
数据：dataList2，
标记：{
启用：false，
},
工具提示：{
pointFormat:“{this.series.data.name}”
},
}]
};
常量选项={
全球：{
useUTC:false
},
朗：{
小数点：'，'，
千塞普：'.'
}
};

通过这种方式，条形图在工具提示中加载值{this.series.data.y}，在折线图中加载值{this.series.data.name}

例如：


单击条的位置“4”，在工具提示上加载“31.29”的值
单击线条的位置“4”，在工具提示上加载“22h 30m”的值


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: '.'
    }
};