如何在java脚本高图中实现z索引

How to implement z index in java script high chart

本文关键字:实现 索引 高图中 脚本 java      更新时间:2023-09-26

我想用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

)

您需要在图表的工具提示选项中使用formatter属性,并且您需要有一个包含z值的数组。请看下面的例子:

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