如何结合高图(热图)和表格(将每个表格行与热图行对应)? [英] How to combine highcharts (heatmap) and table (mapping each table row with heatmap row)?

问题描述

我正在生成热图，但同时我有一个表，该表对热图中的每一行都具有相应的信息，因此我想将两者并排保存.

I am generating heatmap but at the same time I have one table which has corresponding information for each row in heatmap so I want to keep both side by side.

下面是热图代码的示例链接. http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/heatmap/

Below is sample link for heatmap code. http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/heatmap/

表的html代码:

<table cellpadding=0,celspacing=12>
     <tr><td>Monday</td><td>Smith</td><td>50</td></tr>
    <tr><td>Tuesday</td><td>Jackson</td><td>90</td></tr>
    <tr><td>Wednesday</td><td>Doe</td><td>80</td></tr>
   <tr><td>Thursday</td><td>Doe</td><td>80</td></tr>
   <tr><td>Friday</td><td>Doe</td><td>80</td></tr>
</table>

如何在高图表中嵌入html代码?

How can I embed html code in highcharts?

推荐答案

您可以对启用的刻度/lineWidth参数使用多个yAxis(每个col).

You can use use multiple yAxis (per each col) with enabled ticks / lineWidth params.

yAxis: [{
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null
    },{
          linkedTo: 0,
        tickLength:100,
        tickWidth: 2,
        opposite: true,
        title: null,
         lineWidth: 2,
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    },{
          linkedTo: 0,
        tickLength:100,
        tickWidth: 2,
        opposite: true,
        title: null,
        lineWidth: 2,
        categories: ['Smith', 'Jackson', 'Doe', 'Doe', 'Doe'],
    },{
          linkedTo: 0,
        gridLineWidth: 2,
        tickLength:100,
        tickWidth: 2,
        opposite: true,
        title: null,
         lineWidth: 2,
        categories: ['10', '20', '40', '59', '23'],
    }],

示例: - http://jsfiddle.net/0qmt0mkq/

这篇关于如何结合高图(热图)和表格(将每个表格行与热图行对应)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！