Question

将一些数据显示为高亮显示中的列。数据是关于每月登记的列。

以下是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   
        }]
    });
});

E.g。在上面的jsfiddle例子中因此，在悬停与1月数据相关联的列时，它应显示工具提示中的另一列高清图{“早晨”：2，“下午”：3，“夜晚”：5}。即在早上2，下午3和晚上5注册。

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

Answer 1

要使某个点的工具提示包含另一个图表，您需要做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)
            }
        },

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。

Answer 2

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

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-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％确定如何将数据传递到它中......

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

2 个答案: