Question

我正在使用Highcharts JavaScript库来显示一些浮点值，我通过php提供给js代码。正如您在下图中所看到的，现在每个点的鼠标悬停都会显示与轴值和文本“text：undefined”对应的两个值。 Current Visualisation

我的问题是：有没有办法为散点图的每个点显示不同的文字？我有一个与每个点相对应的文本，但我还没有找到显示它的方法。

我的JavaScript / php代码是：

<script type="text/javascript">
    $(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'scatter',
            zoomType: 'xy'},
        title: {
            text: 'Average 24hrs Sentiment for <?php echo $channel?> by Gender '
        },
        subtitle: {
            text: 'Source: '
        },
        xAxis: {
            title: {
                enabled: true,
                text: 'Hours ([0-24h].[0-60mins])'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                text: 'Sentiment (N. Bayes) %'
            }
        },
        tooltip: {
            formatter: function() {
                    return ''+
                    this.x +' hrs, '+ this.y +' sentiment, text: ';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 24,
            y: 1,
            floating: true,
            backgroundColor: '#FFFFFF',
            borderWidth: 1
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Female',
            color: 'rgba(223, 83, 83, .5)',
            data: [
            <?php 

            for($j=0;$j<$i1;$j++)
            {
                if($females[$j]['Hour'][0] == "0")
                {
                    echo '['.$females[$j]['Hour'][1].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]';
                }
                else
                    echo '['.$females[$j]['Hour'].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]';

                if(($j+1)!=$i1)
                {
                    echo ",";
                }
            }
        ?>
        ]}, 
            {
            name: 'Male',
            color: 'rgba(119, 152, 191, .5)',
            data: [
            <?php 

            for($j=0;$j<$i2;$j++)
            {
                if($males[$j]['Hour'][0] == "0")
                {
                    echo '['.$males[$j]['Hour'][1].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]';
                }
                else
                    echo '['.$males[$j]['Hour'].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]';

                if(($j+1)!=$i2)
                {
                    echo ",";
                }
            }
            ?>
            ]}]
    });
});

}）;

谢谢。

Answer 1

如果文本对每个点都是唯一的，则可以传递超过x和y的值作为值。在下面的example中，我传递了三个其他值：locked，unlocked和potential。然后，要在工具提示格式化程序中访问它们，请使用this.point.locked

执行此操作

Answer 2

 this.x +' hrs, '+ this.y +' sentiment, text: ';

尝试在此代码行中设置文字，只是为了检查我的建议是否能解决你的问题，试试：

 this.x +' hrs, '+ this.y +' sentiment, text: '+this.x;

然后检查（this.x）值是否显示为“未定义”。

如何在Highcharts Javascript库中的散点图上添加额外标签？

2 个答案: