Question

下面的代码段会显示带有货币符号的Colin Cockram : 601118.076工具提示。如何在此工具提示中附加我的第3个<td>值？

需要Colin Cockram : 601118.076 - Survey : 891等工具提示。

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

＆＃13;

$(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
            },
        });
    });

＆＃13;

<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>

＆＃13;

Answer 1

通过将数据源设置为json对象而不是dataTable

，有更好的方法

使用系列

将您的数据导入图表

系列：[{ 数据：[{ 姓名：＆＃39; Gavin Leney＆＃39;， y：13592.400， z：＆＃39; 39＆＃39; }，{ 姓名：＆＃39; Colin Cockram＆＃39;，是：601118.076， z：＆＃39; 891＆＃39; }，{ 姓名：＆＃39; Alan Alker＆＃39;， y：152274.000， z：＆＃39; 235＆＃39; }] }]，

然后您可以摆脱数据

数据：{ 表：＆＃39;数据表＆＃39; }，//当您使用系列提供数据时，不再需要此功能。此外，现在您可以摆脱整个数据表的html。

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

＆＃13;

    $(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
                },
            });
        });

＆＃13;

    <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>

＆＃13;

Answer 2

我的解决方案非常hacky jQuery明智。它不是通过推荐的高级图表方式完成的，但我没有那么多时间来阅读他们的文档。

这段代码用图表中当前点的文本搜索TD，然后跳过两个点以获得第3个td元素中的数字。然后将该文本包含在工具提示格式化程序

中

'tableOptions' => [
        'id' => 'theDatatable',
        'class'=>'table table-striped table-bordered'
        ],

在高图的工具提示

2 个答案: