javascript - Highcharts 不从 html 表中呈现标签

Question

在 HighCharts 中 - 如何获取标签和弹出标签以引用 HTML 表格的第一列:

我已经添加到这个 fiddle 中: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 中生成数据数组，然后创建 Highcharts 。

检查以下 JSFiddle，它按照您的预期工作并使用您的表格。

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

View Working JSFiddle!

我在 Javascript 的第 58 行 添加了 legend ，如果你不想要它，请删除该行，(你也可以点击图例名称添加/从图表中删除它们)。

我还建议查看 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}});

:)