在高图的工具提示中创建图形

Create graph in tooltip of highchart

本文关键字：创建 图形 工具提示 高图      更新时间：2023-09-26

有一些数据显示为highchart中的列。数据是关于每个月的注册数。

以下是jsfiddle的链接:http://jsfiddle.net/CkkbF/161/在图形的每个工具提示中要显示另一个列图。

$(function () {
    // Registrations Data
    var data ={10:{"Morning":2,"Afternoon":3,"Night":5},//Jan
        12:{"Morning":2,"Afternoon":5,"Night":5},//Feb
        15:{"Morning":5,"Afternoon":3,"Night":7},//Mar
        17:{"Morning":8,"Afternoon":3,"Night":6},//Apr
        18:{"Morning":2,"Afternoon":3,"Night":13}, //May
        22:{"Morning":12,"Afternoon":3,"Night":7},//June
        15:{"Morning":2,"Afternoon":8,"Night":5},//July
        27:{"Morning":12,"Afternoon":11,"Night":4},//Aug
        17:{"Morning":2,"Afternoon":5,"Night":10},//Sep
        10:{"Morning":2,"Afternoon":3,"Night":5},//Oct
        14:{"Morning":2,"Afternoon":4,"Night":8},Nov
        24:{"Morning":12,"Afternoon":7,"Night":5},DEc
    }
    var series_data=[]
    for (key in data) {series_data.push(parseInt(key))}
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
        series: [{
            data: series_data   
        }]
    });
});

。在上面的jsfiddle示例中
因此，当悬停与一月数据相关的列时，它应该在工具提示{"Morning":2，"Afternoon":3，"Night":5}中显示另一个列高图。即上午2、下午3和晚上5的注册。

如何实现这一点的任何帮助。

要使一个点的工具提示包含另一个图表，您需要做3件事(我相信还有其他方法，但这是基本方法)。我不记得我从哪里拉这个，因为它不是我的代码，但它的工作:

1首先为每个点设置数据。

var data0 = [12, 12];
var data1 = [6, 12];
var toolTipData = [];
toolTipData.push(data0);
toolTipData.push(data1);

2然后构建一个方法来提取适当的数据点。

tooltip: {
            useHTML: true,
            formatter: function() {
                var i = this.key;
                setTimeout( function() {
                    $("#hc-tooltip").highcharts({
                        series: [{
                            data: toolTipData[i]
                        }]
                    });
                }, 10)
            }
        },

现在你需要把你刚刚制作的图表放进一个容器里。

tooltip: {
            useHTML: true,
            formatter: function() {
                var i = this.key;
                setTimeout( function() {
                    $("#hc-tooltip").highcharts({
                        series: [{
                            data: toolTipData[i]
                        }]
                    });
                }, 10)
                return '<div id="hc-tooltip"></div>';
            }
        },

setTimeout用于平滑工具提示/图表的创建。因此，我们在这里所做的是创建一个数组(toolTipData)并填充将用于每个点的工具提示图表的数据(data0和data1)。我们通过显示工具提示的点的索引访问toolTipData。

我不确定在工具提示中是否有图表，但您可以使用HTML，例如API文档中的以下示例:

http://jsfiddle.net/gh/get/jquery/1.7.2/hililide-software/highcharts.com/tree/master/samples/highcharts/tooltip/footerformat/

tooltip: {
   shared: true,
   useHTML: true,
   headerFormat: '<small>{point.key}</small><table>',
   pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
   '<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
   footerFormat: '</table>',
   valueDecimals: 2
}

不能100%确定如何将数据传递给它…

相关文章：