javascript - HTML 在 JavaScript 中显示值 "data"

Question

以下 JavaScript 代码用于将表格数据显示到图表中。

  <script type="text/javascript">
        $(function () {
            $('#container').highcharts({
                data: {
                    table: 'datatable'
                },
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Results'
                },
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: 'Units'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toLowerCase();
                    }
                }
            });
        });
    </script>

保存数据的 HTML 代码:

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

<table id="datatable">
    <thead>
        <tr>
            <th></th>
            <th>Jane</th>
            <th>John</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Apples</th>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <th>Pears</th>
            <td>2</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

我的 HTML 中还有以下值:

<div id="name"> </div>
<div id="age"></div>

“姓名”和“年龄”具有不同的值。如何将值而不是数据实现到图表中:(Jane、John、Apples、Pears)。这可能吗？

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-parsed/

这就是我的图表显示 atm 的方式。我可以在图表上输入“姓名”和“年龄”吗？

Answer 1

您的问题有点模糊，但我会尽力提供帮助。我相信如果提供更多信息，我们都可以提供更好的答案，例如:

您想在图表上显示什么数据？

您想要测量的值是多少？例如，您在测量年数吗？

您是在衡量同一个人的不同元素还是不同人的相同元素？

我假设当您声明要在图表上显示“姓名”和“年龄”而不是示例中提供的内容时，您希望显示以年龄作为测量值的姓名。如果是这样的话，那么这就是我的想法。

JSFiddle: Javascript HighChart Example with Age as Measuring Value

HTML 代码

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

Javascript代码

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Age of Major Life Events'
        },
        subtitle: {
            text: 'Created By: <a href="http://www.rocketrisa.com">Rocket Risa</a>'
        },
        xAxis: {
            categories: ['John', 'Jane', 'Jessica', 'Jordan', 'Jeri'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Age (years)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' years'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Teen',
            data: [15, 13, 18, 14, 17]
        }, {
            name: 'Young Adult',
            data: [23, 28, 21, 25, 27]
        }, {
            name: 'Middle Age 30+',
            data: [35, 46, 32, 64, 51]
        }]
    });
});