HTML 在 JavaScript “data” 中显示值

HTML displaying values in JavaScript "data"

本文关键字：显示 data JavaScript HTML 更新时间：2023-09-26

以下 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的方式。我可以在图表上输入"姓名"和"年龄"吗？

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

您希望在图表上显示哪些数据？

您想要衡量的价值是多少？例如，你在测量年份吗？

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

我假设当您说要在图表上显示"名称"和"年龄"而不是示例中提供的内容时，您希望显示年龄为测量值的名称。如果是这样的话，那么这就是我想出的。

JSFiddle：Javascript HighChart 示例，年龄作为测量值

网页代码

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

Javascript Code

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