时间戳

首页 > 解决方案 > Billboard.js：图表未显示我放置的位置

javascript - Billboard.js：图表未显示我放置的位置

问题描述

我正在使用 Billboard.js ( https://naver.github.io/billboard.js/ ) 在折线图中显示我的数据。在我的 html 中，我在表格之前声明了我的图表，并且我希望它出现在所述表格之前，但它正在加载到表格下方。

我将如何强制图表出现在表格上方？

    <head>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script src="~/Scripts/billboard.js"></script>
        <link rel="stylesheet" href="~/Content/billboard.css">
        <link rel="stylesheet" href="~/Content/insight.css">
        <script type="text/javascript">
            var chart = bb.generate({
                data: {
                    x: "x",
                    xFormat: "%Y-%m-%d %H:%M",
                    columns: [
                       ["x"@Html.Raw(Model.FirstOrDefault().List_GraphTime)],
                       ["@Html.Raw(Model.FirstOrDefault().Name_Temp_5m)"@Model.FirstOrDefault().List_Variable_5m]                      
                    ]
                },
                axis: {
                    x: {
                        type: "timeseries",
                        tick: {
                            format: "%Y-%m-%d %H:%M"
                        }
                    }
                },
                legend: {
                    position: "right"
                },
                zoom: {
                    enabled: {
                        type: "drag"
                    }
                },
                size: {
                    height: 600
                },
                padding: {
                    right: 260,
                    left: 260
                },
                bindto: "#chart"
            });
        </script>
    </head>

    <div id="chart"></div>

    <table class="table wb-tables table-striped table-bordered">
        <thead>
            <tr>
                <th>Update Date</th>
                <th>Water Temp 5m (°C)</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(modelItem => item.LastUpdateTime)</td>
                    <td>@Html.DisplayFor(modelItem => item.Variable_5m)</td>
                </tr>
            }
        </tbody>
    </table>

标签： javascriptc#html

解决方案

是因为您在呈现绑定元素之前生成图表。尝试在按如下方式呈现绑定元素后移动您的生成代码。

<head>
    ...
    <!-- (1) Move the generation code from -->
    <script type="text/javascript">
        var chart = bb.generate({ ... });   
    </script>
</head>

<body>
    <div id="chart"></div>
    <table class="table wb-tables table-striped table-bordered"></table>

    <!-- (2) to this point, where after the '<div id="chart">' is rendered -->
    <script type="text/javascript">
        var chart = bb.generate({ ... });

    </script>
</body>

推荐阅读