如何使用 plotly 从 CSV 数据中绘制多条线？答案

【问题标题】：How to plot multiple lines from CSV data using plotly?如何使用 plotly 从 CSV 数据中绘制多条线？
【发布时间】：2017-05-26 11:03:44
【问题描述】：

我有一个包含 3 列的 CSV 文件：库存、日期、价格

我想使用 Plotly.js 将其绘制为多行（每只股票 1 行）。

我是否需要“手动”将每个库存解压到变量中，或者是否有这样做的功能？（我已经搜索了文档，但找不到任何东西）

【问题讨论】：

你能分享一些数据吗？

标签： plotly

【解决方案1】：

最好排列 CSV 文件，使标题行是 ['Date','StockA','StockB','StockC']。然后接下来的每一行是 ['actual_date','PriceA','PriceB','PriceC']。这样，您可以运行 javascript map 函数以输出到各个跟踪。

我最近拼凑了类似的东西，但目前找不到信用链接：

<div id=chartID></div>
<script>

    Plotly.d3.csv('/chart_data.csv', function(err, rows){
      function unpack(rows, key) {
        return rows.map(function(row) {return row[key]; });
      }

      var trace1 = {
        type: "scatter",
        mode: "lines",
        name: "StockA",
        x: unpack(rows, 'Date'),
        y: unpack(rows, 'StockA'),
        line: {
          color: '#FF8700',
          width: 3,
          shape: "spline"
        }
      }

      var trace2 = {
        type: "scatter",
        mode: "lines",
        name: "Stock B",
        x: unpack(rows, 'Date'),
        y: unpack(rows, 'StockB'),
        line: {
          color: '#81827F',
          width: 3,
          shape: "spline"
        }
      }

      var trace3 = {
        type: "scatter",
        mode: "lines",
        name: "Stock C",
        x: unpack(rows, 'Date'),
        y: unpack(rows, 'StockC'),
        line: {
          color: '#04824C',
          width: 3,
          shape: "spline"
        }
      }

      var data = [trace1, trace2, trace3];

      var layout = {
       // Put your visual settings here
        };


      Plotly.newPlot('chartID', data, layout);

    })

</script>

【讨论】：