Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/mongodb/12.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何组合highcharts(热图)和table(将每个表行映射到热图行)?_Highcharts_Html Table - Fatal编程技术网

如何组合highcharts(热图)和table(将每个表行映射到热图行)?

如何组合highcharts(热图)和table(将每个表行映射到热图行)?,highcharts,html-table,Highcharts,Html Table,我正在生成热图,但同时我有一个表,其中有热图中每一行的相应信息,所以我想保持两行并排 下面是热图代码的示例链接。 表格的html代码: <table cellpadding=0,celspacing=12> <tr><td>Monday</td><td>Smith</td><td>50</td></tr> <tr><td>Tuesday</

我正在生成热图,但同时我有一个表,其中有热图中每一行的相应信息,所以我想保持两行并排

下面是热图代码的示例链接。

表格的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>

星期一史密斯50
星期二杰克森90
星期三80
星期四80
星期五80
如何在highcharts中嵌入html代码


您可以使用多个Y轴(每个列)和启用的刻度/线宽参数

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'],
    }],
例如:
-

您可以使用多个Y轴(每个列)和启用的刻度/线宽参数

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'],
    }],
例如:
-

这很好,但我还有一列,每行都有复选框,它们的id需要传递到其他页面。是否也可以添加复选框?复选框只能作为HTML对象和表格添加。您可以添加下一个轴并捕获标签格式化程序。在函数内部,返回复选框输入。我尝试在x轴上实现同样的功能,但它不适合ColumWise。@SebastianBochan太棒了!有没有办法让tickLength动态化?这样它就可以正确地扩展更长的内容了?这很好,但我还有一列,每行都有复选框,它们的id需要传递到另一个页面。是否也可以添加复选框?复选框只能作为HTML对象和表格添加。您可以添加下一个轴并捕获标签格式化程序。在函数内部,返回复选框输入。我尝试在x轴上实现同样的功能,但它不适合ColumWise。@SebastianBochan太棒了!有没有办法让tickLength动态化?这样它就可以正确地扩展更长的内容了?