Всплывающая подсказка с несколькими осями в jquery - PullRequest
0 голосов
/ 21 июня 2019

При использовании нескольких осей значение xaxis для yaxis обычно отображается во всплывающей подсказке с использованием% x, но% x для y2axis имеет выходной экземпляр с тиковым числом xaxis.

Результатом моего желания является то, что значение всплывающей подсказки составляет 0000-00-00 00:00:00, но теперь y2axis помечено как 0, 1, 2

Есть ли способ адресации значений, хранящихся в массиве данных, во всплывающей подсказке?

flot y2axis http://101.101.160.29/sdr/y2.png

(function($, window, document, undefined) {

    var demos = {
        lineCharts_sy: function(target) {
            var data = [{
                    data: [
                        [0, 100.1],
                        [1, 100.2],
                        [2, 100.3]
                    ],
                    label: "temp",
                    color: '#CC2B36',
                    lines: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        steps: false,
                        fillColor: {
                            colors: [{
                                opacity: 0.25
                            }, {
                                opacity: 0
                            }]
                        }
                    },
                    points: {
                        show: false,
                        radius: 1
                    }
                }, {
                    data: [
                        [0, 0.01],
                        [1, 0.02],
                        [2, 0.03]
                    ],
                    label: "pres",
                    color: '#115b74',
                    lines: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        steps: false,
                        fillColor: {
                            colors: [{
                                opacity: 0.25
                            }, {
                                opacity: 0
                            }]
                        }
                    },
                    points: {
                        show: false,
                        radius: 1
                    },
                    yaxis: 2
                }],


                options = {
                    xaxis: {
                        show: true,
                        tickColor: 'transparent',
                        ticks: [
                            [0, 2019 - 01 - 01 00: 00: 00],
                            [0, 2019 - 01 - 01 00: 01: 00],
                            [0, 2019 - 01 - 01 00: 02: 00]
                        ]
                    },
                    yaxis: {
                        ticks: [
                            [0, "0°C"],
                            [50, "50°C"],
                            [100, "100°C"],
                            [150, "150°C"],
                            [200, "200°C"]
                        ]
                    },
                    y2axis: {
                        ticks: [
                            [0.00, "0Mpa"],
                            [0.50, "0.5Mpa"],
                            [1.00, "1.0Mpa"],
                            [1.50, "1.5Mpa"],
                            [2.00, "2.0Mpa"]
                        ],
                        position: "right"
                    },
                    grid: {
                        borderWidth: 1,
                        hoverable: true

                    },
                    legend: {
                        position: 'ne'
                    },
                    tooltip: {
                        show: true,
                        content: function(label, xval, yval, flotItem) {
                            if (flotItem.seriesIndex == 0) { // you could also use the label
                                return '%x : %y.1 °C';
                            } else {
                                return '%x : %y.2 Mpa';
                            }
                        }
                    }
                };

            $.plot(target, data, options);
        }
    };
    $(window).load(function() {});
    $(document).ready(function() {
        if ($.plot) {
            demos.lineCharts_sy($('#demo-charts-02'), false);
        }
    });
})(jQuery, window, document);
...