首頁  >  文章  >  web前端  >  xCharts-基於D3的JavaScript圖表庫程式碼詳解(圖)

xCharts-基於D3的JavaScript圖表庫程式碼詳解(圖)

黄舟
黄舟原創
2017-03-16 14:42:162030瀏覽

xCharts-基於D3的JavaScript圖表庫程式碼詳解(圖)

##xCharts是一款基於D3的JavaScript圖表庫,xCharts的功能非常強大,不僅支援多種圖表類型,而且擁有豐富的圖表主題風格,並且非常漂亮。另外,xCharts的設計非常靈活,配置也比較簡單,載入速度也還不錯,是一款開放性和可自訂性都非常不錯的JavaScript圖表應用程式。

xCharts的特點

  • 基於JavaScript,只要有瀏覽器即可使用,平台相容性不錯。

  • 開放,可自訂,因此配置相當靈活。

  • 支援SVG格式,因此也可以方便地匯出圖表資料。

xCharts的使用

簡單的長條圖

JavaScript程式碼:

var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
var myChart = new xChart('bar', data, '#example1');

效果圖:

線性圖

JavaScript程式碼:

var data = {
  "xScale": "time",
  "yScale": "linear",
  "type": "line",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "2012-11-05",
          "y": 1
        },
        {
          "x": "2012-11-06",
          "y": 6
        },
        {
          "x": "2012-11-07",
          "y": 13
        },
        {
          "x": "2012-11-08",
          "y": -3
        },
        {
          "x": "2012-11-09",
          "y": -4
        },
        {
          "x": "2012-11-10",
          "y": 9
        },
        {
          "x": "2012-11-11",
          "y": 6
        }
      ]
    }
  ]
};
var opts = {
  "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
  "tickFormatX": function (x) { return d3.time.format('%A')(x); }
};
var myChart = new xChart('line', data, '#example3', opts);

效果圖:

動畫長條圖

JavaScript程式碼:

var errorBar = {
  enter: function (self, storage, className, data, callbacks) {
    var insertionPoint = xChart.visutils.getInsertionPoint(9),
      container,
      // Map each error bar into 3 points, so it's easier to draw as a single path
      // Converts each point to a triplet with y from (y - e) to (y + e)
      // It would be better to use the `preUpdateScale` method here,
      // but for this quick example, we're taking a shortcut  
      eData = data.map(function (d) {
        d.data = d.data.map(function (d) {
          return [{x: d.x, y: d.y - d.e}, {x: d.x, y: d.y}, {x: d.x, y: d.y + d.e}];
        });
        return d;
      }),
      paths;

    // It's always a good idea to create containers for sets
    container = self._g.selectAll('.errorLine' + className)
xChart.setVis('error', errorBar);
var data = {
    "xScale": "ordinal",
    "yScale": "linear",
    "main": [
      {
        "className": ".errorExample",
        "data": [
          {
            "x": "Ponies",
            "y": 12
          },
          {
            "x": "Unicorns",
            "y": 23
          },
          {
            "x": "Trolls",
            "y": 1
          }
        ]
      }
    ],
    "comp": [
      {
        "type": "error",
        "className": ".comp.errorBar",
        "data": [
          {
            "x": "Ponies",
            "y": 12,
            "e": 5
          },
          {
            "x": "Unicorns",
            "y": 23,
            "e": 2
          },
          {
            "x": "Trolls",
            "y": 1,
            "e": 1
          }
        ]
      }
    ]
  };

效果圖:

#總結

xCharts的功能相當強大,如果你在自己的網路應用程式中需要使用圖表,那麼xCharts非常適合你,可以試試看。

以上是xCharts-基於D3的JavaScript圖表庫程式碼詳解(圖)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn