澳门新葡萄京官网首页 8

美观又实用,10款强大的开源 Javascript 图表库

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

纯JavaScript图表组件dhtmlxChart

dhtmlxChart也是一款基于JavaScript的图表应用组件,和之前分享的xCharts类似,dhtmlxChart也提供了非常丰富的图表类型,应该说和xCharts相比,它提供的图表类型更多,包括饼图、雷达图、离散点图和更复杂的图表类型。dhtmlxChart提供了开源的版本,但它的商业版需要49美元以上,有点小贵。

dhtmlxChart的配置

在页面上引用dhtmlx的相关js脚本和css文件即可完成安装:

<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>

路径需要你自己修改。

澳门新葡萄京官网首页,另外dhtmlxChart提供了4种数据源格式,支持XML、JSON、CSV以及JS数组,以XML为例:

window.onload = function(){
        var barChart =  new dhtmlXChart({
            view:"bar",
            container:"chartDiv",
            value:"#sales#",
            gradient:"falling",
            color:"#b9a8f9",
            radius:0,
            alpha:0.5,
            border:true,
            width:70,
            xAxis:{
                template:"#year#"
            },
            yAxis:{
                start:0,
                end:100,
                step:10,
                template:function(obj){
                    return (obj%20?"":obj)
                }
            }
        })
        barChart.load("../common/data.xml");
}

dhtmlxChart柱形图生成

window.onload = function(){
var barChart1 =  new dhtmlXChart({
view:"bar",
container:"chart1",
    value:"#sales#",
        label:"'#year#",
        barWidth:35,
        radius:0,
        gradient:"rising"
})
barChart1.parse(dataset,"json");
barChart1.attachEvent("onItemClick",function(id){alert(id)})
var barChart2 =  new dhtmlXChart({
view:"bar",
container:"chart2",
    value:"#sales#",
        label:"'#year#",
        color:"#66ccff",
        gradient:"rising",
        barWidth:25,
        padding:{
            top:50,
            bottom:0,
            right:50,
            left:50
        }
});
barChart2.parse(dataset,"json");
}

这里就使用了json的数据格式。

效果图如下:

澳门新葡萄京官网首页 1

dhtmlxChart雷达点图生成

var chart =  new dhtmlXChart({
            container:"chartDiv",
            view:"radar",
value:"#companyA#",
            disableLines:true,
item:{
                borderWidth:0,
                radius:2,
color: "#6633ff"
},
xAxis:{
template:"#month#"
},
yAxis:{
lineShape:"arc",
                bg:"#fff8ea",
                template:function(value){
                    return parseFloat(value).toFixed(1)
                }
}
        });
        chart.parse(companies,"json");

效果图如下:

澳门新葡萄京官网首页 2

dhtmlxChart离散点图生成

chart =  new dhtmlXChart({
            view:"scatter",
container:"chartDiv",
    value:"#b#",
xValue: "#a#",
            yAxis:{
                title:"Value B"
            },
            xAxis:{
                title:"Value A"
            },
            tooltip:{
              template:"#a# - #b#"
            },
            item:{
                radius:5,
                borderColor:"#f38f00",
                borderWidth:1,
                color:"#ff9600",
                type:"d",
                shadow:true
            }
        });
chart.parse(scatter_dataset,"json");

效果图如下:

澳门新葡萄京官网首页 3

其他类型的图表使用也是类似,dhtmlxChart最大的特点还是支持大部分流行的数据格式作为图表的数据,这样我们开发者使用起来非常方便,大家可以尝试一下dhtmlxChart的开源免费版本。


澳门新葡萄京官网首页 4


dhtmlxChart也是一款基于JavaScript的图表应用组件,和之前分享的xCharts类似,dhtmlxChart也提供了非常丰富的图表类型…

澳门新葡萄京官网首页 5

dhtmlxChart也是一款基于JavaScript的图表应用组件,和之前分享的xCharts类似,dhtmlxChart也提供了非常丰富的图表类型,应该说和xCharts相比,它提供的图表类型更多,包括饼图、雷达图、离散点图和更复杂的图表类型。dhtmlxChart提供了开源的版本,但它的商业版需要49美元以上,有点小贵。

随着发展,现代 Web
设计在改善体验和功能的同时,对于美观的追求也越来越高,可视化、交互式、动态等元素和效果似乎已成为标配。以下是为开发者推荐的
10 款开源 Javascript
图表库,可以帮助实现各种漂亮的功能。话不多说,直接开始吧!1、EChartsECharts
由百度前端技术部开发的,是一个纯 Javascript 的图表库,可以流畅的运行在
PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的 Canvas 类库
ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。ECharts
有良好的自适应效果,ECharts 3
中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。2、Chart.jsChart.js
是一个简单、面向对象、为设计者和开发者准备的 Javascript
图表绘制工具库,基于 HTML5 canvas 技术,支持所有现代浏览器,并且针对
IE7/8 提供了降级替代方案。Chart.js
不依赖任何外部工具库,轻量级,并且提供了加载外部参数的方法。能用多种不同的方式让数据变得可视化。3、jqPlotjqPlot
是一个非常强大的基于 jquery 类库的 Javascript
图表工具,可在网页中绘制线状、柱状、饼状等多种样式图表。jqPlot
强大之处在于将内容呈现为动态嵌入的静态图像,这意味着图表数据可以通过
Ajax 更新,甚至不需要刷新页面。
某些图表类型甚至具有悬停选项,可在悬停时显示相关数据。4、Chartist.jsChartist.js
是一个使用 SVG
构建的简单的响应式图表库,可以作为前端图表生成器。同样兼容当前绝大部分浏览器。Chartist.js
每个图表从大小到配色方案都是完全响应和高度可定制的,依靠 SVG
将图形作为图像动态地呈现到页面上。完全使用 SASS
构建,并且支持自定义。5、xChartsxCharts 是一个使用 D3.js
来构建漂亮的可定制的数据驱动的 JavaScript 图表库,使用 HTML、CSS、SVG
实现图表,适用于熟悉数据可视化的用户。通过 xCharts
渲染的所有内容都有很强的适应性,在与数据交互时添加自己的动画或缓动函数也较为容易。6、C3.jsC3.js
也是一个基于 D3.js 的可重用的开源 JavaScript
图表库。这意味着将数据图表绘制到 HTML
页面上的过程得到简化,不需要大量的自定义 D3
图表代码,也相对容易上手。C3.js
所有的数据是完全动态的,从工具到图形颜色。它使用非常舒服,有充分的可定制性和控制性,支持多种图表类型。7、Pizza
Pie Charts
Pizza Pie Charts 是由 ZURB 开发的一个知名的 JavaScript
库,用于渲染基于 SVG 的饼图。Pizza Pie Charts
所有的显示设置和选项都可以直接在 CSS 或 JavaScript中
修改。它专注于以最好的方式将数据呈现到饼图。如果是其他图表样式,还是建议使用其它的几个库。8、ProtovisProtovis
使用简单的标记组成数据的自定义视图。 与一些低级图形库不同,Protovis
通过对数据进行编码的动态属性来定义标记,允许继承、缩放和布局来简化构建。Protovis
有能力渲染非常独特的图表样式,它使用 JavaScript 和 SVG 进行 Web
本地可视化,无需插件。9、FlotFlot 是 jQuery 的纯 JavaScript
图表库,专注于使用简单,外观漂亮和强互动功能。它是特定的 jQuery
库,这意味着你需要使用它需要熟悉基础的
jQuery。但是从另一方面来说,这意味着你可以全面控制呈现,动作和用户交互。使用
Flot
的主要好处是能够创建动画绘制图,可以以此展现大量的结果数据。它兼容大多数现代浏览器,向下兼容到
IE6 和 Firefox2。10、DygraphsDygraphs 也是一个基于 HTML5 canvas 的
JavaScript
图表库,可以生成一个可交互式的,可缩放的的曲线表,可以用来显示大密度的数据集,并且可以让用户来浏览和解释这个曲线图。Dygraphs
在移动设备上还可以通过缩放显示效果来支持交互。如果你想用 JavaScript
绘制数据,那么 Dygraphs 是一个不错的选择。

dhtmlxChart的配置

在页面上引用dhtmlx的相关js脚本和css文件即可完成安装:

<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>

路径需要你自己修改。

另外dhtmlxChart提供了4种数据源格式,支持XML、JSON、CSV以及JS数组,以XML为例:

window.onload = function(){
        var barChart =  new dhtmlXChart({
            view:"bar",
            container:"chartDiv",
            value:"#sales#",
            gradient:"falling",
            color:"#b9a8f9",
            radius:0,
            alpha:0.5,
            border:true,
            width:70,
            xAxis:{
                template:"#year#"
            },
            yAxis:{
                start:0,
                end:100,
                step:10,
                template:function(obj){
                    return (obj%20?"":obj)
                }
            }
        })
        barChart.load("../common/data.xml");
    }

dhtmlxChart柱形图生成

window.onload = function(){
    var barChart1 =  new dhtmlXChart({
        view:"bar",
        container:"chart1",
        value:"#sales#",
        label:"'#year#",
        barWidth:35,
        radius:0,
        gradient:"rising"
    })
    barChart1.parse(dataset,"json");
    barChart1.attachEvent("onItemClick",function(id){alert(id)})
    var barChart2 =  new dhtmlXChart({
        view:"bar",
        container:"chart2",
        value:"#sales#",
        label:"'#year#",
        color:"#66ccff",
        gradient:"rising",
        barWidth:25,
        padding:{
            top:50,
            bottom:0,
            right:50,
            left:50
        }
    });
    barChart2.parse(dataset,"json");
    }

这里就使用了json的数据格式。

效果图如下:

澳门新葡萄京官网首页 6

dhtmlxChart雷达点图生成

var chart =  new dhtmlXChart({
            container:"chartDiv",
            view:"radar",
            value:"#companyA#",
            disableLines:true,
            item:{
                borderWidth:0,
                radius:2,
                color: "#6633ff"
            },
            xAxis:{
                template:"#month#"
            },
            yAxis:{
                lineShape:"arc",
                bg:"#fff8ea",
                template:function(value){
                    return parseFloat(value).toFixed(1)
                }
            }
        });
        chart.parse(companies,"json");

效果图如下:

澳门新葡萄京官网首页 7

dhtmlxChart离散点图生成

chart =  new dhtmlXChart({
            view:"scatter",
            container:"chartDiv",
            value:"#b#",
            xValue: "#a#",
            yAxis:{
                title:"Value B"
            },
            xAxis:{
                title:"Value A"
            },
            tooltip:{
              template:"#a# - #b#"
            },
            item:{
                radius:5,
                borderColor:"#f38f00",
                borderWidth:1,
                color:"#ff9600",
                type:"d",
                shadow:true
            }
        });
        chart.parse(scatter_dataset,"json");

效果图如下:

澳门新葡萄京官网首页 8

其他类型的图表使用也是类似,dhtmlxChart最大的特点还是支持大部分流行的数据格式作为图表的数据,这样我们开发者使用起来非常方便,大家可以尝试一下dhtmlxChart的开源免费版本。

发表评论

电子邮件地址不会被公开。 必填项已用*标注