Plotly Javascript无法使用本地CSV_Javascript_Html_Csv_Plotly

Plotly Javascript无法使用本地CSV

javascript html csv

Plotly Javascript无法使用本地CSV,javascript,html,csv,plotly,Javascript,Html,Csv,Plotly,我正在练习复制美国合唱地图（）当我运行他们链接到CSV文件（）的代码段时，它就工作了但是，当我尝试下载该CSV并使用本地文件路径运行它时，该图不起作用。我很难去检查，因为Plotly并没有明确地记录所有内容（我知道这在某种程度上使用了D3协议）我所做的就是更改文件路径 <head>  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script&g

我正在练习复制美国合唱地图（）

当我运行他们链接到CSV文件（）的代码段时，它就工作了

但是，当我尝试下载该CSV并使用本地文件路径运行它时，该图不起作用。我很难去检查，因为Plotly并没有明确地记录所有内容（我知道这在某种程度上使用了D3协议）

我所做的就是更改文件路径

<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
    Plotly.d3.csv("C:/Users/Me/Desktop/JavaScript Practice/2011_us_ag_exports.csv", function (err, rows) {
        function unpack(rows, key) {
            return rows.map(function (row) { return row[key]; });
        }

        var data = [{
            type: 'choropleth',
            locationmode: 'USA-states',
            locations: unpack(rows, 'code'),
            z: unpack(rows, 'total exports'),
            text: unpack(rows, 'state'),
            zmin: 0,
            zmax: 17000,
            colorscale: [
              [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'],
              [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'],
              [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)']
            ],
            colorbar: {
                title: 'Millions USD',
                thickness: 0.2
            },
            marker: {
                line: {
                    color: 'rgb(255,255,255)',
                    width: 2
                }
            }
        }];

        console.log(data.locations);
        var layout = {
            title: '2011 US Agriculture Exports by State',
            geo: {
                scope: 'usa',
                showlakes: true,
                lakecolor: 'rgb(255,255,255)'
            }
        };
        Plotly.plot(myDiv, data, layout, { showLink: false });
    });
</script>


Plotly.d3.csv（“C:/Users/Me/Desktop/JavaScript Practice/2011\u us\u ag\u exports.csv”），函数（err，rows）{
函数解包（行、键）{
返回行.map（函数（行）{returnrow[key]；}）；
}
风险值数据=[{
类型：'choropleth'，
地点模式：“美国各州”，
位置：解包（行，“代码”），
z：解包（行，“总出口”），
文本：解包（行，“状态”），
zmin:0，
zmax:17000，
色阶：[
[0，'rgb（242240247）”，[0.2，'rgb（218235）”，
[0.4，'rgb（188189220）”，[0.6，'rgb（158154200）”，
[0.8，'rgb（117107177）][1，'rgb（84,39143）]
],
色条：{
标题：“百万美元”，
厚度：0.2
},
标记：{
行：{
颜色：“rgb（255255）”，
宽度：2
}
}
}];
控制台日志（数据位置）；
变量布局={
标题：“2011年美国各州农业出口”，
地理：{
经营范围：美国，
没错，
湖色：“rgb（255255）”
}
};
Plotly.plot（myDiv，数据，布局，{showLink:false}）；
});

将您的路径更改为相对路径

Plotly.d3.csv（“2011\u us\u ag\u exports.csv”，…

问题不在于plotly，而在于它。

我试过了，但没有成功；但这是我第一次尝试网页设计。该文件与html文件位于同一文件夹中。您可能在控制台中看到一个跨源错误-运行本地服务器将解决此问题：您可以使用firefox进行尝试。我使用firefox加载本地选项卡文件d它可以工作（使用

d3.tsv（“AFolder/file.tab”）

）。相同的示例在chrome中不工作会导致上述交叉源错误。您可以简单地使用python3（在您的开发文件夹中）

python-mhttp.server 8888&

然后在浏览器中打开html

localhost:8888/yourfile.html

；同时确保将csv文件路径更改为

http://localhost:8888/path-到js脚本中的csv

。