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

Question

早上好

是否可以在 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”，但我想在工具提示中显示等于“Test 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,
        };

Answer 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}。

例如:

• 点击条形图的位置“4”，在工具提示上加载值“31.29”。
• 单击该行的位置“4”，在工具提示中加载“22h 30m”的值。