1

在 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} %'
                }
            }
        }
    });
});
4

1 回答 1

2

要解决您的名称问题，请在 javascript 中生成数据数组，然后创建高图。

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

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

查看工作中的 JSFiddle！

我添加了legendon 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}});

:)

于 2013-06-26T16:09:03.167 回答