Question

我有一个High Charts折线图，通过php和javascript从MySQL数据库中提供。我正确地显示了图表，两条线都显示出来。唯一的问题是工具提示（我相信它被称为）当我将它设置为共享：true，它将共享数据点，但它不会显示任何工具提示，并删除十字准线，即使十字准线选择为true，但当我删除共享时，设置为＆＃39; false＆＃39;它将执行正确的行为，单独选择它们并显示工具提示，带有值的名称。我已经改变了它，并且不知所措。

这是我的代码：

<!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>

以下是它正在做的事情： enter image description here 以下是我希望的行为，但更多的数据点。

所需行为 enter image description here

Answer 1

当您的工具提示已共享时，您无法在格式化程序功能中访问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;
        }
}

有关正常工作的演示，请参阅http://jsfiddle.net/5EgLN/。

高图表多行图表不显示多行的工具提示

1 个答案: