javascript - 在 highchart 的工具提示中创建图表

Question

这个问题已经有答案了:

Create chart in tooltip formatter (1 个回答)

已关闭 9 年前。

有一些数据要在 Highcharts 中显示为列。数据是有关每月注册量的列数据。

以下是 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} 中显示另一个列 Highcharts 。即早上 2 号、下午 3 号和晚上 5 号登记。

任何帮助如何实现这一目标。

Answer 1

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

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)
            }
        },

3 现在您需要将刚刚制作的图表放入容器中。

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。