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

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

javascript php jquery highcharts

Javascript 高位图表多行图表不显示多行的工具提示,javascript,php,jquery,highcharts,Javascript,Php,Jquery,Highcharts,我有一个通过php和javascript从MySQL数据库输入的高图表折线图。我的图表显示正确，两条线都显示为它们应该显示的样子。唯一的问题是当我将其设置为共享时的工具提示（我相信它被调用）：true，它将共享数据点，但它不会显示任何工具提示，并删除十字光标，即使十字光标被选择为true，但当我删除共享并设置为“false”时，它将执行正确的行为，分别选择它们并显示工具提示，使用值命名。我改变了它，不知所措这是我的代码： <!DOCTYPE HTML> <html>

我有一个通过php和javascript从MySQL数据库输入的高图表折线图。我的图表显示正确，两条线都显示为它们应该显示的样子。唯一的问题是当我将其设置为共享时的工具提示（我相信它被调用）：true，它将共享数据点，但它不会显示任何工具提示，并删除十字光标，即使十字光标被选择为true，但当我删除共享并设置为“false”时，它将执行正确的行为，分别选择它们并显示工具提示，使用值命名。我改变了它，不知所措

这是我的代码：

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


使用Highcharts从MySQL获取数据的堆叠面积图
$（文档）.ready（函数（）{
变量选项={
图表：{
renderTo:“容器”
},
图例：{
启用：对，
背景颜色：“#FFFFFF”，
布局：“垂直”，
对齐：“右”，
浮动：是的，
对,，
垂直排列：“顶部”，
y:-20.0，
x:-20.0
},
xAxis：{
类别：[]
},
亚克斯：{
标题：{
文本：“DPMO”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
工具提示：{
十字准星：没错，
动画：没错，
共享：布尔，
格式化程序：函数（）{
返回''+this.series.name+'
'+
this.x+'：'+this.y；
}
},
标题：{
文本：“12周IRDR DPMO”，
x:-20/中心
},
副标题:{
正文：'http://xxxxxxx.com/',
x:-20
},
打印选项：{
行：{
allowPointSelect:false，
光标：“”，
活动：{
legendItemClick:“”
},
showInLegend：对
}
},
系列：[{
颜色：Highcharts.getOptions（）.colors[2]}
]
}
$.getJSON（“data.php”，函数（json）{
options.xAxis.categories=json[0]['data']；
options.series[0]=json[1]；
options.series[1]=json[2]；
图表=新的高点图表。图表（选项）；
});
});

下面是它正在做的事情： 以下是我想要的行为，但更多的数据点。

期望的行为：

共享工具提示时，您无法访问格式化程序函数中的

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;
        }
}

工具提示：{
十字准星：没错，
动画：没错，
分享：是的，
格式化程序：函数（）{
返回此.x+“
”
+this.points[0].series.name+'：'+this.points[0].y+'
'
+this.points[1].series.name+'：'+this.points[1].y；
}
}

请参阅以获得一个有效的演示。

太棒了，太简单了！！多容易啊！我觉得自己好笨P您是否知道如何设置始终位于特定数据点的两条静态线？5公里，3公里？不管怎样，谢谢。不管我的问题是什么，我都明白了：）谢谢你的帮助！