Scatter中的工具提示

时间:2013-06-18 11:20:41

标签: highcharts tooltip scatter

我在添加unix时间戳作为工具提示中的额外点时遇到问题。 我的代码没有显示图表。救命! 这是我的代码的一部分:

我的数据数组:$ data [] =“[x:$ valDE,y:$ valDN,z:$ datetime]”;

我的javascript:

    var <?php echo $chart ?> = new Highcharts.Chart({
        chart: {
            type: 'scatter',
            renderTo: '<?php echo $container ?>',
            zoomType: '',
            marginLeft: 50,
            borderWidth: 1
        },
        title: {
            text: '<?php echo "$gps $location"; ?>',
            style: {
                fontSize: '<?php echo $sizeTitle ?>'
            }
        },
        subtitle: {
            text: 'Data is average pr. day - viewing <?php if($range == "All"){echo "ALL DATA";}else if($range == "1 YEAR"){echo "LAST YEAR";}else{ echo "last ".$range;} ?>',
            style: {
                fontSize: '<?php echo $sizeSubTitle ?>'
            }
        },
        xAxis: {
            title: {
                enabled: true,
                text: 'EW',
                align: 'high'
            },
            min:-<?php echo $maxAxis ?>,
            max:<?php echo $maxAxis ?>,
            offset: <?php echo $offSetX ?>,
            tickInterval: <?php echo $tickInterval ?>
        },
        yAxis: {
            title: {
                text: 'NS',
                align: 'high'
            },
            min:-<?php echo $maxAxis ?>,
            max:<?php echo $maxAxis ?>,
            offset:<?php echo $offSetY ?>,
            lineWidth:1,
            tickInterval: <?php echo $tickInterval ?>
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: <?php echo $legendX ?>,
            y: <?php echo $legendY ?>,
            floating: true,
            backgroundColor: '#FFFFFF',
            borderWidth: 1,
            itemStyle: {
                fontSize: '<?php echo $legendSize ?>'
            }
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: <?php echo $lineWidth ?>,
                    states: {
                        hover: {
                            enabled: false,
                            lineColor: 'rgb(100,100,100)'
                        }
                    },
                    symbol: "circle"
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: 'EW: {this.x} mm<br>NS: {this.y} mm<br>Date: {this.point.z}'
                }
            }
        },
        series: [{
            color: '#990000',
            name: '<?php echo $legFive ?>',
            data:[<?php echo join(${$da}, ',') ?>]
        },{
            color: '#ff0000',
            name: '<?php echo $legFour ?>',
            data:[<?php echo join(${$da4}, ',') ?>]
        },{
            color: '#ffcc33',
            name: '<?php echo $legThree ?>',
            data:[<?php echo join(${$da3}, ',') ?>]
        },{
            color: '#66ff66',
            name: '<?php echo $legTwo ?>',
            data:[<?php echo join(${$da2}, ',') ?>]
        },{
            color: '#3300ff',
            name: 'Last',
            data:[<?php echo join(${$da1}, ',') ?>]
        }]
    });
    <?php }//for ?>
});

2 个答案:

答案 0 :(得分:1)

请参阅此示例了解如何进行操作:

http://jsfiddle.net/jlbriggs/fbMQf/

您需要使用key-&gt;值对提供数据作为对象,并在格式化程序中进行相应调用。

see fiddle for code

答案 1 :(得分:0)

UNIX时间戳应乘以1000,并按x递增排序。你能附上你的示例系列数据:“echo join($ {$ da1},',')”?