使用d3導入外部數據

echarts是一不錯的可視化工具，你們在用echarts作可視化的時候，可能不太清楚怎麼去導入外部數據（如.csv），尤爲對Javascript比較陌生的小白來講（好比我），那麼這裏介紹一種方法，但願對大家有用。本人因爲剛接觸該語言，若是哪裏寫錯了，還請你們見諒。javascript

須要的包

一、繪圖必備包：echarts
二、數據導入包：d3（搜索相關網頁免費下載，也能夠直接使用我用的這個d3連接：https://d3js.org/d3.v4.min.js）
html

代碼

一、相關包的導入：java

<head>
    <meta charset="UTF-8">
    <title>柱狀圖的繪製</title>   //圖表標題
    <script src ="incubator-echarts-master/dist/echarts.js"></script>//引入echarts包
    <script src="https://d3js.org/d3.v4.min.js"></script>//引入d3包
</head>

那麼這裏的echarts包，我已經下載好了，只須要寫此包的完整路徑就能夠了；d3包我沒有下載，我是直接使用連接的。apache

二、如何使用數組

//獲取csv對象
d3.csv("333.csv",function(error,csvdata){   
    if(error){   
        console.log(error);  
    }else{ 
    for( var i=0; i<csvdata.length; i++ ){   
        nameset.push(csvdata[i].day);           //對象轉數組
        numset1.push(parseFloat(csvdata[i].p50));
        numset2.push(parseFloat(csvdata[i].p80));
    }
//這裏插入須要畫的echarts圖代碼，官網上有更多選擇。
    }
    })

這裏是使用d3的一個基本格式，因爲我導入的是我本身實驗的.csv文件（333.csv），因此使用d3.csv，你們能夠根據須要引用其它格式。echarts

舉例

這裏咱們以畫一個柱狀圖：工具

一、數據spa

二、完整代碼rest

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱狀圖的繪製</title>
    <script src ="incubator-echarts-master/dist/echarts.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="main" style="height: 600px;width:900px;"></div>
<script>

var nameset=[];//數組初始化
var numset1=[];
var numset2=[];
//獲取csv對象
d3.csv("333.csv",function(error,csvdata){   

    if(error){   
        console.log(error);  
    }else{ 
    for( var i=0; i<csvdata.length; i++ ){   
        nameset.push(csvdata[i].day);           //對象轉數組
        numset1.push(parseFloat(csvdata[i].p50));
        numset2.push(parseFloat(csvdata[i].p80));
    }

    var myChart = echarts.init(document.getElementById("main"));

    var option = { 
    color: ['#003366', '#006699'],
    tooltip: { 
        trigger: 'axis',
    },

    legend: { 
        data: ['p50', 'p80']
    },

    toolbox: { 
        show: true,
        feature: { 
            mark: { show: true},
            dataView: { show: true, readOnly: false},
            magicType: { show: true, type: ['line', 'bar']},
            restore: { show: true},
            saveAsImage: { show: true}
        }
    },
    grid: { 
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    calculable : true,
    xAxis: [
        { 
            type: 'category',
            data: nameset,
            axisPointer: { 
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        { 
            type: 'value',
            min: 20,
            max: 70,
            interval: 10,
        }
    ],
    series: [
        { 
            name: 'p50',
            type: 'bar',
            data: numset1,
            color:'#003366'
        },
        { 
            name: 'p80',
            type: 'bar',
            data: numset2,
            color:'#006699'
        }
    ]
};

    myChart.setOption(option);    
    }
});  
</script>
</body>
</html>

三、效果

雖然圖作得有點很差看，可是你們不要質疑用echarts繪圖，畢竟由於是我作的（嘻嘻）。總之，目的達到就行。這種方法供你們參考，固然你們若是有更好的方法能夠一塊兒分享。

code

導入外部數據使用echarts繪圖

導入外部數據（.csv）使用echarts繪圖

使用d3導入外部數據

須要的包

代碼

舉例