javascript - 在 highcharts 工具提示中附加第三个 `<td>` 值

Question

下面的代码片段显示类似 Colin Cockram : 601118.076 的工具提示与货币符号。 我如何附加我的第三个 <td>此工具提示中的值？

需要类似 Colin Cockram : 601118.076 - Survey : 891 的工具提示.

我怎样才能实现这个目标？

$(function () {
        $('#container').highcharts({
            data: {
                table: 'datatable'
            },
            chart: {
                type: 'column'
            },
            title: {
                text: 'Survey Reports Chart'
            },
            subtitle: {
                text: ''
            },
            yAxis: {
                allowDecimals: true,
                min: 0,
                title: {
                    text: 'Amount'
                }
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2);
                }
            },
            plotOptions: {column: {colorByPoint: true}},
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
        });
    });

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<table id="datatable" style="display:none;">
    <thead>
        <tr>
            <th></th>
            <th> Test </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Gavin Leney</td>
            <td>13592.400</td>
            <td>39</td>
        </tr>
        <tr>
            <td>Colin Cockram</td>
            <td>601118.076</td>
            <td>891</td>
        </tr>
        <tr>
            <td>Alan Alker</td>
            <td>152274.000</td>
            <td>235</td>
        </tr>

    </tbody>
</table>

Answer 1

有更好的方法来做到这一点，将数据源设置为 json 对象而不是 dataTable

使用系列将数据绘制到图表

series: [{ data: [{ name: 'Gavin Leney', y: 13592.400, z: '39' },{ name: 'Colin Cockram', y: 601118.076, z: '891' },{ name: 'Alan Alker', y: 152274.000, z: '235' }] }],

然后您就可以删除您的数据

data: { table: 'datatable' }, //This is no longer needed as you are feeding data with series. Also, now you can get rid of your entire html for data table.

请参阅下面的工作代码:[注意:我没有添加系列中的所有数据。]

    $(function () {
            $('#container').highcharts({
                
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Survey Reports Chart'
                },
                subtitle: {
                    text: ''
                },
                yAxis: {
                    allowDecimals: true,
                    min: 0,
                    title: {
                        text: 'Amount'
                    }
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2) +' - <b>Survey</b>: '+ this.point.z;
                    }
                },
                series: [{
                      data: [{
                         name: 'Gavin Leney',
                         y: 13592.400,
                         z: '39'
                     },{
                     name: 'Colin Cockram',
                     y: 601118.076,
                     z: '891'
                 },{
                     name: 'Alan Alker',
                     y: 152274.000,
                     z: '235'
                     }]
                 }],
                plotOptions: {column: {colorByPoint: true}},
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
            });
        });

    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>