JavaScript可视化图表库MetricsGraphics.js

澳门新葡亰手机版 5

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析。

MetricsGraphics.js也是一款基于JavaScript的响应式图表库,和Chartist.js类似,MetricsGraphics.js同样支持几乎所有类型的图表,包括折线图、柱形图、饼图等。同时MetricsGraphics.js是基于可视化图表库D3上面的,因此开发者可以自定义很多功能强大的图表功能。

对任何一个组织来说,如果能够充分的获取数据、可视化数据和分析数据,那么就能很大程度上帮助了解数据产生的深层次原因,以便据此做出正确的决定。

MetricsGraphics.js的使用方法

先来看看效果图:

澳门新葡亰手机版 1

澳门新葡亰手机版 2

JavaScript代码:

MG.data_graphic({
    title: "Downloads",
    description: "This graphic shows a time-series of downloads.",
    data: [{'date':new Date('2014-11-01'),'value':12},
           {'date':new Date('2014-11-02'),'value':18}],
    width: 600,
    height: 250,
    target: '#downloads',
    x_accessor: 'date',
    y_accessor: 'value',
})

MetricsGraphics.js的整体效果还不错,就是有些资源需要翻*墙才能正常使用,不过你也可以下载源代码来试试。

对于前端开发人员来说,如果能够掌握交互式网页中的数据可视化技术,则是一项很棒的技能。当然,通过一些
JavaScript
的图表库也会使前端的数据可视化变得更加容易。使用这些库,开发者可以在无需考虑不同的语法所带来的编程难题的情况下,轻松实现将数据转化为易于理解的图表。

下面是挑选出的
9 个 JavaScript 图表库:

  • Chart.js
  • Chartist
  • FlexChart
  • Echarts
  • NVD3
  • C3.js
  • 澳门新葡亰手机版,TauCharts
  • ReCharts
  • Flot 

 

Chart.js

澳门新葡亰手机版 3

Chart.js
是一种简洁、用户友好的图表库,同时也是基于 HTML5 的 JavaScript
库,用于创建动画、交互式和可自定义的图表和图形。

借助
Chart.js,用户可以轻松直观地查看混合图表类型。默认情况下,也可以使用
Chart.js 创建响应式网页。

Chart.js
库允许用户快速创建可视化数据。Chart.js 易于设置,对初学者十分友好。使用
Chart.js 则不必考虑浏览器的兼容性问题,因为 Chart.js
支持旧浏览器。

使用 npm
安装 Chart.js:

npm
install chart.js –save 

Chart.js
绘制雷达图的代码示例: 

const ctx = document.getElementById("myChart");
const options = {
    scale: {
        // Hides the scale
    }
};
const data = {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [
         {
            data: [-10, -5, -3, -15],
            label: "two",
             borderColor: '#ffc63b'
            },
         {
            data: [10, 5, 3, 10],
            label: "three",
            borderColor: '#1d9a58'
            },
            {
        data: [18, 10, 4, 2],
        label: "one",
        borderColor: '#d8463c'
    },
]
}

const myRadarChart = new Chart(ctx, {
    data: data,
    type: 'radar',
    options: options
});

 

Chartist

 澳门新葡亰手机版 4

Chartist
库很适合于创建美观、响应能力强、阅读友好的图表。Chartist 使用 SVG
来呈现图表。

Chartist
还提供了使用 CSS 媒体查询和创意动画来自定义图表的能力。用户使用 Chartist
在图表设计中实现自己的所有创意。

Chartist
易于配置,也易于使用 Sass 进行定制。但是,它不支持旧浏览器。

使用
Chartist,可以通过 CSS 的样式来美化你的
SVG,用户完全可以现实自己所想的所有图表样式。

使用 npm
安装 Chartist:

npm
install chartist –save 

Chartist
创建具有自定义标签的饼图的代码示例: 

var data = {
  labels: ['Bananas', 'Apples', 'Grapes'],
  series: [20, 15, 40]
};
var options = {
  labelInterpolationFnc: function(value) {
    return value[0]
  }
};
var responsiveOptions = [
  ['screen and (min-width: 640px)', {
    chartPadding: 30,
    labelOffset: 130,
    labelDirection: 'explode',
    labelInterpolationFnc: function(value) {
      return value;
    }
  }],
  ['screen and (min-width: 1024px)', {
    labelOffset: 80,
    chartPadding: 20
  }]
];
new Chartist.Pie('.ct-chart', data, options, responsiveOptions);

 

FlexChart

 澳门新葡亰手机版 5

FlexChart
是高性能的图表工具。使用
FlexChart,可轻松的将表格数据可视化为业务图表。FlexChart
不但支持常见的图表类型,如折线图、饼状图、面积图等,还支持气泡图、K线图、条形图、漏斗图等高级图表类型。

FlexChart
的使用也十分简单,FlexChart 图表将所有与数据有关的任务都委托给
CollectionView 类,只需操作 CollectionView
类,就能实现过滤、排序和分组数据等功能。

FlexChart
包含的图表元素也比较全面,如图表图例、图表标题、图表页脚、数轴、图表
series
和标签等,用户也可以为图表添加自定义的元素,如平均线和趋势线等。

FlexChart
本质上是一种交互式的图表,不论是数据进行任何的更改,都会自动反应在图表上,如图表曲线随数据放大缩小、过滤、钻取、动画等。

查看
FlexChart
的中文学习指南和旭日图Demo。

FlexChart
绘制柱状图的代码示例: 

onload = function() {
  // wrap data in a CollectionView so the grid and chart 
  // get notifications
  var data = new wijmo.collections.CollectionView(getData());
  // create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
      itemsSource: data,
    bindingX: 'country',
    series: [
        { binding: 'sales', name: 'Sales' },
      { binding: 'expenses', name: 'Expenses' },
      { binding: 'downloads', name: 'Downloads' }
    ]
  })
  // create a grid to show the data
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
      itemsSource: data
  })
  // create some random data
  function getData() {
      var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
      for (var i = 0; i < countries.length; i++) {
        data.push({
          country: countries[i],
          sales: Math.random() * 10000,
          expenses: Math.random() * 5000,
          downloads: Math.round(Math.random() * 20000),
        });
      }
      return data;
  }
}