javascript圖表繪制庫:plotly.js

jopen 9年前發布 | 58K 次閱讀 plotly.js 圖表/報表制作


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.baiduhome.net/lib/view/home/1447999586088


 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!