Можно ли загрузить всплывающую подсказку с внешними данными с помощью React-Native-HighCharts? - PullRequest
Новая
       34

Можно ли загрузить всплывающую подсказку с внешними данными с помощью React-Native-HighCharts?

2 голосов
/ 01 апреля 2019

Доброе утро,

Можно ли прочитать внешнюю переменную, содержащую список, в настройках диаграммы HighCharts для React-Native?

Я использую компонент: «Reaction-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», но я хочу показать во всплывающей подсказке текст «list2», равный «Test 4».

Но настройка говорит, что значение 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,
        };

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Я понял!

Мое решение только для вклада.

Сначала я создаю 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" в подсказке.
0 голосов
/ 01 апреля 2019

Пожалуйста, посмотрите на приведенный пример здесь . В вашем случае вы определили конфигурацию следующим образом: 

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;

что может быстро привести к неопределенности одного из методов доступа. Если вы хотите настроить всплывающую подсказку на основе полученных значений, я бы воспользовался функцией форматирования. Вы можете проверить, что такое значения x и y, используя this.x или this.y.

Если вы знаете, что вы хотите отобразить во всплывающих подсказках, я бы просто объявил const вне объекта 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'
  }]
}
...