在C#中使用Plotly實現多圖表聯動,可以通過創建一個Web應用程序并使用Plotly.js庫來實現。以下是一個簡單的示例,展示了如何在ASP.NET Core MVC應用程序中實現多圖表聯動。
首先,創建一個新的ASP.NET Core MVC項目。在Visual Studio中,選擇 “File” > “New” > “Project”,然后選擇 “ASP.NET Core Web Application” 模板。
在項目中添加Plotly.js庫。在wwwroot
文件夾中創建一個名為lib
的文件夾,然后在其中創建一個名為plotly
的文件夾。從Plotly.js的GitHub倉庫(https://github.com/plotly/plotly.js/releases)下載最新版本的plotly.min.js
文件,并將其放入wwwroot/lib/plotly
文件夾中。
在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>
}
這個示例中,我們創建了兩個圖表(chart1
和chart2
),并使用了示例數據。然后,我們使用Plotly.newPlot()
函數將數據渲染到圖表中。最后,我們添加了事件監聽器,當一個圖表發生變化時,另一個圖表也會相應地發生變化。
現在,運行應用程序并訪問/Chart
路徑,你應該能看到兩個聯動的圖表。你可以通過縮放、平移等操作來查看圖表之間的聯動效果。