为什么 Plotly 不显示 ASP.NET Core 应用程序的 x 轴或 y 轴？-解网

问：

我正在尝试将 Plotly JS 集成到 ASP.NET Core 应用程序中。我能够看到图形，但看不到 x 轴和 y 轴。这是布局：

            type: 'scatter',
            mode: 'lines',
            x: unpackData(data, '_time'),
            y: unpackData(data, '_value'),
            line: { color: '#D21F60' }

有谁知道我错过了什么？

我的图表如下所示：

enter image description here

C# jQuery ASP.net-Core-MVC 绘图 Plotly.js

@{
    ViewData["Title"] = "plotly.js";
}

<div id="myPlotlyDiv" style="width:600px;height:400px;"></div>
<script src="https://cdn.plot.ly/plotly-2.26.2.min.js" charset="utf-8"></script>

<script>
    function unpackData(data, key) {
        return data.map(function (row) { return row[key]; });
    }

    // Mock data - replace this with your actual data
    var data = [
        { '_time': '2023-01-01', '_value': 1 },
        { '_time': '2023-02-01', '_value': 3 },
        { '_time': '2023-03-01', '_value': 2 },
    ];

    var trace = {
        type: 'scatter',
        mode: 'lines',
        x: unpackData(data, '_time'),
        y: unpackData(data, '_value'),
        line: { color: '#D21F60' }
    };

    var layout = {
        title: 'Sample Plot',
        xaxis: {
            title: 'Time',
            showline: true,
            showgrid: true,
            showticklabels: true,
            linecolor: 'black',
            linewidth: 2,
            mirror: true,
        },
        yaxis: {
            title: 'Value',
            showline: true,
            showgrid: true,
            showticklabels: true,
            linecolor: 'black',
            linewidth: 2,
            mirror: true,
        }
    };

    Plotly.newPlot('myPlotlyDiv', [trace], layout);
</script>

上一个：Kendo-MVC 列表视图默认选择列表中的第一项

下一个：Jquery 数据表服务器端分页

为什么 Plotly 不显示 ASP.NET Core 应用程序的 x 轴或 y 轴？

Why isn't Plotly showing x or y axes for ASP.NET Core application?

评论