Question

我正在使用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>

Answer 1

是因为要在呈现bind元素之前生成图表。尝试移动您的生成代码，使其在如下所示的bind元素呈现之后发生。

<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>

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

1 个答案: