为了账号安全,请及时绑定邮箱和手机立即绑定

Billboard.js:图表未显示我放置它的位置

Billboard.js:图表未显示我放置它的位置

C#
泛舟湖上清波郎朗 2023-05-13 16:05:53
我正在使用 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>
查看完整描述

1 回答

?
www说

TA贡献1775条经验 获得超8个赞

是因为您在呈现绑定元素之前生成图表。尝试将您的生成代码移动到绑定元素呈现后发生,如下所示。


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


查看完整回答
反对 回复 2023-05-13
  • 1 回答
  • 0 关注
  • 105 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信