高图表多折线图不显示多条线的工具提示

Question

I have a High Charts Line chart feeding from a MySQL database via php and javascript. 我有一个高图表折线图，它是通过php和javascript从MySQL数据库提供的。 I have the chart displaying correctly, both lines are appearing as they should. 我的图表显示正确，两条线都应显示。 The only issue is the tooltip(I believe it's called) when I have it set as shared: true, it will share the data points, BUT it won't display any tooltip, and removes the crosshair even though the crosshairs is selected to true, but when I remove shared, and set to 'false' it will do the correct behavior, selecting them individually and displaying the tooltip, name with the value. 唯一的问题是当我将其设置为共享时的工具提示（我相信它被称为）：是，它将共享数据点，但是不会显示任何工具提示，即使将十字准线选择为true也将删除十字准线，但是当我删除共享并设置为'false'时，它将执行正确的操作，分别选择它们并显示工具提示，名称和值。 I have changed it, and at a loss. 我已经改变了，很茫然。

Here is my code: 这是我的代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Stacked area chart with data from MySQL using Highcharts</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container'
                },

        legend: {
                enabled: true,
                backgroundColor: '#FFFFFF',
                layout: 'vertical',
                align: 'right',
                floating: true,
                reversed: true,
                verticalAlign: 'top',
                y: -20.0,
                x: -20.0
                },

                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'DPMO'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
            crosshairs: true,
            animation: true,
                    shared: Boolean,
                        formatter: function() {
                            return '<b>'+ this.series.name +'</b><br>'+
                            this.x +': '+ this.y;
                    }

                },

         title: {
                    text: '12 Week IRDR DPMO',
                    x: -20 //center
                },

                subtitle: {
                    text: 'http://xxxxxxx.com/',
                    x: -20
                },

                plotOptions: {
                line: {
                allowPointSelect: false,
                cursor: '',
                events: {
                legendItemClick: ' '
                },
                showInLegend: true
                }
            },
                series: [{
                color: Highcharts.getOptions().colors[2]}
                ]
            }

            $.getJSON("data.php", function(json) {
            options.xAxis.categories = json[0]['data'];
                options.series[0] = json[1];
                options.series[1] = json[2];
                chart = new Highcharts.Chart(options);
            });
        });
        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

Here is what it is doing: 这是它在做什么： 在此处输入图片说明 Here is what I would like the behaviour to be, but more multiple data points. 这是我想要的行为，但是有更多的数据点。

Desired Behaviour: 期望的行为： 在此处输入图片说明

Answer 1

When your tooltip is shared you can't access this.series in your formatter function, you need to reference each series separately with this.points[i].series , and similarly for your y values, eg 共享工具提示时，无法在格式化程序函数中访问this.series ，您需要使用this.points[i].series分别引用每个系列，并且类似地使用y值，例如

tooltip: {
    crosshairs: true,
    animation: true,
    shared: true,
    formatter: function() {
        return this.x + '<br>'
            + this.points[0].series.name + ': ' + this.points[0].y + '<br>'
            + this.points[1].series.name + ': ' + this.points[1].y;
        }
}

See http://jsfiddle.net/5EgLN/ for a working demo. 有关有效的演示，请参见http://jsfiddle.net/5EgLN/ 。

高图表多折线图不显示多条线的工具提示

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-06-03 21:58:38

高图表多折线图不显示多条线的工具提示

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-06-03 21:58:38

解决方案1
1 已采纳 2014-06-03 21:58:38