javascript - 如何在 javascript highchart 中实现 z 索引

Question

我正在尝试使用 js 和 php 实现一个图表。

我已经创建了图表。现在，当用户单击图形点时，它会显示 y 轴值和 x 轴值。当用户单击图点时，我想显示另一个值( x 和 y 除外)。我已经从 ajax 文件中返回了所有这些 x、y 和 z 值。但无法实现 z 索引。请帮助我。

$("document").ready(function(event){
    var pickerOpts = {
            dateFormat:"d/m/yy"

            };

    $('.date').datepicker(pickerOpts);
    function loadGraph(d1,d2){


    $.ajax({

            dataType:'json',
            type:'POST',
            url:'../ajaxtaskAnalytics',
            data:{
                date1:d1,
                date2:d2
            },
            success:function(result){


            $.parseJSON(result);

            var gval=[];
            for(var i=0;i<result['tasks'].length;i++){

                gval.push([

                            Date.parse(result['tasks'][i].dt+' UTC')
                            , 
                            result['tasks'][i].number,
                            result['tasks'][i].usercount
                        ]);

            } 

            var options = {

                chart: {
                    renderTo: 'container'
                },

                title: {
                    text: 'Task Analytics'
                },

                subtitle: {
                    text: 'Machbee'
                },

                xAxis: {
                    type: 'datetime',
                    tickInterval: 1 * 24 * 3600 * 1000, // one week
                    tickWidth: 0,
                    gridLineWidth: 1,
                    labels: {
                        align: 'left',
                        x: 3,
                        y: -3 
                    }
                },

                yAxis: [{ // left y axis
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'left',
                        x: 3,
                        y: 16,
                        formatter: function() {
                            return Highcharts.numberFormat(this.value, 0);
                        }
                    },
                    showFirstLabel: false
                }, { // right y axis
                    linkedTo: 0,
                    gridLineWidth: 0,
                    opposite: true,
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'right',
                        x: -3,
                        y: 16,
                        formatter: function() {

                            return Highcharts.numberFormat(this.value, 0);
                        }
                    },
                    showFirstLabel: false
                }],

                legend: {
                    align: 'left',
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    borderWidth: 0
                },

                tooltip: {
                    shared: true,
                    crosshairs: true
                },

                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function() {

                                    hs.htmlExpand(null, {
                                        pageOrigin: {
                                            x: this.pageX, 
                                            y: this.pageY
                                        },
                                        headingText:  Highcharts.dateFormat('%Y %b %e', this.x),
                                        maincontentText: ' Total Tasks :'+this.y ,
                                        width: 200
                                    });
                                }
                            }
                        },
                        marker: {
                            lineWidth: 1
                        }
                    }
                },

                series: [{
                    name: 'Task Info',
                    lineWidth: 4,
                    marker: {
                        radius: 4
                    }
                }]
            };
            options.series[0].data = gval;
            //options.series[1].data = gval;

            chart = new Highcharts.Chart(options);


            $("#analyticsTaskCount").html("No Of Tasks in this WorkSpace is"+result['total']);          


            $("#analyticsUser").html("");
            for(var k=0;k<result['users'].length;k++){

                $("#analyticsUser").append("<br>"+result['users'][k].name+"="+result['users'][k].taskcount);

            } 

            }
            });
            }
            loadGraph($("#sdate").val(),$("#ddate").val()); 


            var okay=true;

            $("#sdate").live('click',function(){

                    $("#err_startdate").html("");               

            });

            $("#ddate").live('click',function(){

                if($("#sdate").val().length<8){

                    $("#err_startdate").html("Please select the first date");
                    okay= false;
                }


            });
            $("#ddate").live('blur',function(){
                $("#err_enddate").html("");
                if($("#sdate").val().length<8){

                    $("#err_startdate").html("Please select the first date");
                    okay=false;
                }
                if($("#ddate").val().length<8){

                    $("#err_enddate").html("Please select the second date");
                    okay=false;
                }

            });
            $("#ddate").live('change',function(){
                loadGraph($("#sdate").val(),$("#ddate").val());             
            });

}); 

====================================== AJAX 文件输出 =======

(
[tasks] => Array
    (
        [0] => Array
            (
                [added_on] => 1322629212
                [dt] => 2011/11/30
                [number] => 3
                [usercount] => 1
            )

        [1] => Array
            (
                [added_on] => 1323071708
                [dt] => 2011/12/05
                [number] => 2
                [usercount] => 1
            )

        [2] => Array
            (
                [added_on] => 1323424536
                [dt] => 2011/12/09
                [number] => 1
                [usercount] => 1
            )

        [3] => Array
            (
                [added_on] => 1323754243
                [dt] => 2011/12/13
                [number] => 2
                [usercount] => 1
            )

    )

[users] => Array
    (
        [0] => Array
            (
                [name] => God
                [taskcount] => 7
            )

        [1] => Array
            (
                [name] => Veela
                [taskcount] => 1
            )

    )

[total] => 8

)

Answer 1

您需要在图表的工具提示选项中使用格式化程序属性，并且需要一个包含 z 值的数组。请参阅以下示例:

http://jsfiddle.net/hHjZb/5/