Question

使用React-Native在图表的工具提示中添加不同的值时出现问题。
我们有3个系列的图表。第一个显示条，其他显示线。
当我在工具栏上单击时，我会加载一个工具提示，其值为“ this.y”，这是我所需要的并且可以正常工作。
但是当我单击行时，我需要将其他值加载到工具提示中。
但是我无法加载这些值。单击不会打开工具提示。

//Bar data
this.state.barArray = [10.1, 22.5, 33.3, 4.5, 1.5, 26.3, 17, 18.20, 9.2, 0.9, 1, 2];

//Line 1 data
this.state.line1Array = [12.1, 21.5, 23.3, 14.5, 13.5, 16.3, 15, 18.12, 19.2, 10.9, 0, 2.5];

//Line 2 data
this.state.line2Array = [13.1, 18.5, 13.3, 24.5, 19.5, 23.3, 10.3, 16.40, 29.2, 5.9, 21.3, 0];

//X axis of chart
this.state.dias = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

//Here I load 2 arrays with the values. I want to display on each line
var toolTip = ['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 toolTip2 = ['1h 30m','1h 30m','4h 30m','5h 30m','6h 30m','4h 30m','1h 30m','7h 30m','15h 30m','2h 13m','12h 30m','00h 30m'];

图形配置。

var conf={
    chart: {
        type: 'column',
    },
    yAxis: {
        title: {
            useHTML: true,
            text: null,
        },
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    colors: 
        ['#DA6AFF', 'rgb(71, 40, 213)', 'rgb(172, 143, 242)'], //Bar and lines colors
    title: {
        text: null
    },
    xAxis: {
        categories: this.state.dias 
    },
    credits: {
        enabled: false
    },
    series: [{
        type: 'column', //First serie with bar
        name: 'Bar',
        data: this.state.barArray, 
        marker: {
            enabled: false,
        },
        tooltip: {
            useHTML: true,
            shared: false,
            pointFormatter: function() {
                return '<b>Value: ' + this.y + '</b>';
            }
        }
    }, {
        type: 'line', //Second serie with first line
        name: 'Line 1',
        data: this.state.line1Array,
        marker: {
            enabled: false,
        },
        tooltip: {
            useHTML: true,
            shared: false,
            pointFormatter: function() {
                Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
                    return '<b>' + p + '</b>';
                });
            }
        }
    }, {
        type: 'line', //Second serie with second line
        name: 'Line 2',
        data: this.state.line2Array,
        marker: {
            enabled: false,
        },
        tooltip: {
            useHTML: true,
            shared: false,
            pointFormatter: function() {
                Highcharts.each(toolTip2[this.series.data.indexOf(this)], function(p) {
                    return '<b>' + p + '</b>';
                });
            }
        }
    }],

    tooltip: {
        headerFormat: '',
    },
};

const options = {
    global: {
        useUTC: false
    },
    lang: {
        decimalPoint: ',',
        thousandsSep: '.'
    }
};

我通过此链接http://jsfiddle.net/o2zmLngr/5/的示例进行了此操作，但无法在React-Native中复制它。

有人可以帮助我为图表线创建单独的工具提示并从其他数组加载信息吗？

使用多个系列添加不同的工具提示值

0 个答案: