javascript图表绘制库:plotly.js

jopen 8年前


Plotly.js 是一个构建在d3.jsstack.gl,之上的开源 JavaScript图表绘制库。plotly.js是一个高级,声明式的图表库。 plotly.js支持20多图表类型,包括3D图表,统计图表,和SVG地图。

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){        var YEAR = 2007;        var continents = ['Asia', 'Europe', 'Africa', 'Oceania', 'Americas'];        var POP_TO_PX_SIZE = 2e5;        function unpack(rows, key) {            return rows.map(function(row) { return row[key]; });        }          var data = continents.map(function(continent) {            var rowsFiltered = rows.filter(function(row) {                return (row.continent === continent) && (+row.year === YEAR);            });            return {                mode: 'markers',                name: continent,                x: unpack(rowsFiltered, 'lifeExp'),                y: unpack(rowsFiltered, 'gdpPercap'),                text: unpack(rowsFiltered, 'country'),                marker: {                    sizemode: 'area',                    size: unpack(rowsFiltered, 'pop'),                    sizeref: POP_TO_PX_SIZE                }            };        });        var layout = {            xaxis: {title: 'Life Expectancy'},            yaxis: {title: 'GDP per Capita', type: 'log'},            margin: {t: 20},            hovermode: 'closest'        };        Plotly.plot('my-graph', data, layout, {showLink: false});    });

项目主页:http://www.open-open.com/lib/view/home/1447999586088