Question

在HighCharts中 - 如何让标签和弹出标签引用HTML表的第一列：

我已添加到这个小提琴：http://jsfiddle.net/XJ9ck/3/ - 饼图呈现，具有正确的数字，但它只是不起作用的标签。我怀疑它在这里：

dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }

感谢您的帮助，

标记

我的代码是：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<table id="datatable2">
<thead>
    <tr>
        <th>Num</th>
        <th>Status Reason</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Client Action Required</td>
        <td>64</td>
    </tr>
    <tr>
        <td>Future Enhancement</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Client Hold</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Monitoring</td>
        <td>11</td>
    </tr>
</tbody>
</table>

<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto"></div>

我的Javascript是：

    $(function () {
    $('#container').highcharts({
        data: {
            table: document.getElementById('datatable2')
        },
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Queue by Person and Status'
        },

        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        }

        , plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        }
    });
});

Answer 1

要修复名称问题，请在javascript中生成数据数组，然后创建高图。

检查以下JSFiddle，它的工作方式与您的表格一致。

它动态地在javascript中构建数据数组，然后生成图表。

View Working JSFiddle!

我在legend上添加了line 58 of the Javascript，如果您不想要它，请删除该行，（您也可以点击图例名称在图表中添加/删除它们。）

我还建议查看 Highcharts文档： http://api.highcharts.com/highstock
它有很好的文档记录，如果您遇到任何问题，它将拥有您需要的一切。

此外，您可以通过在页面顶部添加以下内容来删除“highcharts.com”。

// By default.. ALL charts should not show the credits (if you want)
Highcharts.setOptions({credits: {enabled: false}});

:)

Highcharts不会从html表格渲染标签

1 个答案: