Fatal编程技术网
  • javascript/
  • Javascript 使用动态输入更新plotly js Y轴

Javascript 使用动态输入更新plotly js Y轴

javascript jquery html

Javascript 使用动态输入更新plotly js Y轴,javascript,jquery,html,plotly,plotly.js,Javascript,Jquery,Html,Plotly,Plotly.js,我使用x轴是文件中的行数，y轴显示可通过下拉列表选择的数据集，从CSV数据制作动态图表，有两个选项： 数据1 数据2 这两个选项都表示文件中的列值。当我选择data 1时，y轴从该列中获取值，并显示图形，数据2的情况与相同 问题在于，当选择并绘制data 1时，选择data 2会向图表中添加新数据（新行），而不清除前一行。我希望选择data 2时，data 1行消失。有人能在这里帮助我，告诉我如何实现这个功能吗 function selectedY() { var ax

我使用
x轴
是文件中的行数，
y轴
显示可通过
下拉列表
选择的数据集，从
CSV
数据制作动态图表，有两个选项：

  • 数据1
  • 数据2
这两个选项都表示文件中的列
值。当我选择
data 1
时，
y轴
从该列中获取
值
，并显示图形，数据2的情况与
相同

问题在于，当选择并绘制
data 1
时，选择
data 2
会向图表中添加新数据（新行），而不清除前一行。我希望选择
data 2
时，
data 1
行消失。有人能在这里帮助我，告诉我如何实现这个功能吗



    function selectedY() {
      var axisValue = $("#dataBtn :selected").val();

      Plotly.d3.csv(result.csv, function(allRows){
       var x_row = [], y_data = [];
       for (var i=0; i<allRows.length; i++) {
          xrow = i;
          row = allRows[i];
          x_row.push( xrow);
          y_data.push( +row[axisValue]);

        var dataRow = {
            x: x_row,
            y: y_data,
            mode: 'lines+markers',
            type: 'scatter',
            line: {
              color: '#62B5E5',
              width: 2
            }
          };

          var data =[dataRow];

          var layout= {
          title: dynamic chart
          };

          Plotly.plot("chart", data, layout);    
      });
    }




函数selectedY（）{
var axisValue=$（“#数据：选定”）.val（）；
Plotly.d3.csv（result.csv，函数（所有行）{
变量x_行=[]，y_数据=[]；
对于（var i=0；i您可以使用
restyle
函数清除“old”行。此外，您不需要每次调用函数时都加载CSV文件。此外，我还必须修复示例中的一些语法错误（例如
标题：dynamic chart
中缺少引号等）

我没有您的数据，所以我使用了一个在线源代码，但在本例中，我尝试保持您的大部分原始代码不变：


<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
</head> 
<body>

<select onchange="selectedY()"  style="right: 10px; top: 20px;" id="dataBtn" title="Choose data">
     <option value="">Choose options</option>
     <option value="Number of Solar Plants">Number of Solar Plants</option>
     <option value="Installed Capacity (MW)">Installed Capacity</option>
     <option value="Generation (GWh)">Generation</option>
</select>

<div id="chart" style="width: 1050px; height: 400px;"></div>

<script>

    var data = [];
    var layout= {title: 'Solar Energy', 'xaxis': {'title': 'States'}, };
    var allRows = null

    Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv', function(err, data){
        allRows = data
    }); 

    Plotly.plot("chart", data, layout); 

    function selectedY() {
    var axisValue = $("#dataBtn :selected").val();

      var x_row = [], y_data = [];

      for (var i=0; i<allRows.length; i++) {
        xrow = i;
        row = allRows[i];
        x_row.push(xrow);
        y_data.push(+row[axisValue]);

        var dataRow = {
            x: x_row,
            y: y_data,
            mode: 'lines+markers',
            type: 'scatter',
            line: {
              color: '#62B5E5',
              width: 2
            }
         }; 
      }  

      layout['yaxis'] = {'title': {'text': axisValue}}
      Plotly.restyle('chart', 'y', [[]]); 
      Plotly.plot("chart", [dataRow], layout);        
  }

</script>

</body>
</html>




选择选项
太阳能发电厂的数量
装机容量
一代
var数据=[]；
var布局={title:'Solar Energy'，'xaxis'：{'title'：'States'}，}；
var allRows=null
Plotly.d3.csv（'https://raw.githubusercontent.com/plotly/datasets/master/solar.csv，函数（错误，数据）{
allRows=数据
}); 
绘图。绘图（“图表”、数据、布局）；
函数selectedY（）{
var axisValue=$（“#数据：选定”）.val（）；
变量x_行=[]，y_数据=[]；

对于（var i=0；i
谢谢，现在更清楚了。感谢您在这里帮助我解决此解决方案，但当我尝试在控制台中打印dataRow时遇到另一个问题，它表示未定义，我相信数据没有在所有行中解析