简体   繁体   中英

How to add an extra label on a scatter plot point in Highcharts Javascript library?

I am using the Highcharts JavaScript library to visualize some float values, which i feed into the js code via php. As you can see in the following picture, on each point's mouseover are now displayed the two values that correspond to the axes values and the text "text: undefined". 当前可视化

My question is : Is there a way to display a different text for each point of the scatter plot? I have a text that corresponds to each point, but I haven't found a way to display it.

My JavaScript/php code is:

<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 ",";
                }
            }
            ?>
            ]}]
    });
});    

});

Thank you.

If the text is unique to each point, you can pass more than the x and y as values. In the following example I pass three other values: locked, unlocked, and potential. Then to access them in the tooltip formatter, do so by using the this.point.locked

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

Try to set the text in this code line, just in order to check whether my suggestion will solve your problem, try :

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

And then check whether (this.x) value appears insted of "undefined" .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM