中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

c# plotly怎樣實現多圖表聯動

c#
小樊
88
2024-09-17 01:15:04
欄目: 編程語言

在C#中使用Plotly實現多圖表聯動,可以通過創建一個Web應用程序并使用Plotly.js庫來實現。以下是一個簡單的示例,展示了如何在ASP.NET Core MVC應用程序中實現多圖表聯動。

  1. 首先,創建一個新的ASP.NET Core MVC項目。在Visual Studio中,選擇 “File” > “New” > “Project”,然后選擇 “ASP.NET Core Web Application” 模板。

  2. 在項目中添加Plotly.js庫。在wwwroot文件夾中創建一個名為lib的文件夾,然后在其中創建一個名為plotly的文件夾。從Plotly.js的GitHub倉庫(https://github.com/plotly/plotly.js/releases)下載最新版本的plotly.min.js文件,并將其放入wwwroot/lib/plotly文件夾中。

  3. Views文件夾中創建一個名為Chart的文件夾,然后在其中創建一個名為Index.cshtml的視圖文件。在該文件中,添加以下代碼:

@{
    ViewData["Title"] = "Chart";
}

<div id="chart1" style="width: 600px; height: 400px;"></div>
<div id="chart2" style="width: 600px; height: 400px;"></div>

@section Scripts {
   <script src="~/lib/plotly/plotly.min.js"></script>
   <script>
        // 示例數據
        var x1 = [1, 2, 3, 4];
        var y1 = [10, 15, 13, 17];
        var x2 = [1, 2, 3, 4];
        var y2 = [16, 5, 11, 9];

        // 創建圖表1
        var trace1 = {
            x: x1,
            y: y1,
            mode: 'lines+markers',
            name: 'Chart 1'
        };
        var data1 = [trace1];
        var layout1 = {
            title: 'Chart 1'
        };
        Plotly.newPlot('chart1', data1, layout1);

        // 創建圖表2
        var trace2 = {
            x: x2,
            y: y2,
            mode: 'lines+markers',
            name: 'Chart 2'
        };
        var data2 = [trace2];
        var layout2 = {
            title: 'Chart 2'
        };
        Plotly.newPlot('chart2', data2, layout2);

        // 圖表聯動
        var chart1 = document.getElementById('chart1');
        var chart2 = document.getElementById('chart2');
        chart1.on('plotly_relayout', function (eventdata) {
            Plotly.relayout(chart2, eventdata);
        });
        chart2.on('plotly_relayout', function (eventdata) {
            Plotly.relayout(chart1, eventdata);
        });
    </script>
}

這個示例中,我們創建了兩個圖表(chart1chart2),并使用了示例數據。然后,我們使用Plotly.newPlot()函數將數據渲染到圖表中。最后,我們添加了事件監聽器,當一個圖表發生變化時,另一個圖表也會相應地發生變化。

現在,運行應用程序并訪問/Chart路徑,你應該能看到兩個聯動的圖表。你可以通過縮放、平移等操作來查看圖表之間的聯動效果。

0
怀来县| 竹溪县| 阳山县| 远安县| 杭锦旗| 正阳县| 射洪县| 曲靖市| 获嘉县| 云林县| 西乌珠穆沁旗| 莆田市| 阿鲁科尔沁旗| 花莲县| 黄梅县| 玛纳斯县| 聂荣县| 台江县| 莆田市| 彭山县| 金华市| 留坝县| 娄烦县| 乾安县| 永寿县| 分宜县| 灵宝市| 贞丰县| 丰顺县| 纳雍县| 通海县| 怀集县| 邵阳市| 伊金霍洛旗| 潮州市| 娄底市| 广德县| 永清县| 惠州市| 开鲁县| 衡阳县|