JavaScript数据可视化编程学习(一)Flotr2,包含简单的,柱状图,折线图,饼图,散点图


参考这一篇http://www.cnblogs.com/chengxs/p/7857233.html


一、基础柱状图

二、基础的折线图 

三、基础的饼图

四、基础的散点图

 

一、基础柱状图

如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图。柱状图可以表示数据的变化过程或者表示多个数据之间的差异。

1、引入javascrippt

使用flotr2这个JavaScript库来创建图表。使用flotr2之前,不需要引入其他的JavaScript库(比如jquery),但是flotr2必须依赖HTML5的canvas元素的支持。canvas支持的主流浏览器有:chrome,Safari,firefox,以及IE9以上。如果非要支持到IE8,可以再引入一个额外的库excanvas.min.js

首先看一下html代码

 

2、创建一个包含图表容器的div元素

创建一个div来包裹这个图表,要求这个div元素必须指定他的宽和高,图表才能建立起来。下面例子采用的是内联的方法指定div的css样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="chart" style="width: 600px;height: 300px;"></div>
        <script src="js/flotr2.js"></script>
     </body>
</html>

上面就是一个简单的代码框架。

 

3、定义数据

有了代码框架,就应该考虑如何显示数据。

显示数据:1、可以是本地的数据;2、可以是ajax请求获取的数据

建立三维数组

<script>
            var win = [
                [
                    [2006, 13],
                    [2007, 11],
                    [2008, 15],
                    [2009, 15],
                    [2010, 18],
                    [2011, 21],
                    [2012, 28]
                ]
            ];
        </script>

[x,y]中,x表示年,y表示获胜的场次。我们把若干个x,y组合使用一个外层数组进行嵌套,这个嵌套的数组是序列。我们在这个序列外边又嵌套一个外层数组,以便我们将来可以存储多个序列。

注意:(1)数组的第一层:每一个独立的数据自身是一个数组,包含x,y。

(2)数组的第二层:若干个独立的数据在一起构成一个数组,成为序列。

(3)组的第三层:若干个序列构成flotr2渲染图表使用的完整的数据,形式也是数组。

 

4、绘制图表

简单的绘制一个图表,调用flotr2库。

window.onload = function() {
                Flotr.draw(
                    document.getElementById("chart"), wins, {
                        bars: {
                            show: true
                        }
                    }
                );
            };

代码中,window.onload这个函数,在我们需要把文档加载完成之后调用,window.onload事件触发后,我们执行flotr.draw这个函数,并传3个参数给它,这三个参数包括:图表的html元素本身,刚才定义的图表数据,一些可配置的图表选项。

如果你的页面有jquery,可以使用jq方法来改写这代码。

 5、改进纵坐标

上图有问题:

(1)纵轴的刻度。flotr2默认将数据中的最大值和最小值自动设置为坐标的取值范围。2007年对应的是11,但是给人感觉就是0,这种情况需要避免。

(2)纵轴的格式。flotr2默认将精确到小数点后一位,在标注中或多带一个多余的“.0”。

Flotr.draw(
                    document.getElementById("chart"), wins, {
                        bars: {
                            show: true,
                        },
                        yaxis:{
                            min:0,
                            tickDecimals:0,
                        }
                    }
                );

注意:flotr2区分大小写。

flotr.draw函数通过min属性设置纵轴的最小值;

通过ticketDecimals属性告诉标注展示的小数精度。我们不想要小数,设置成0。




简单进行图表选项的配置。解决了纵轴最小值问题和刻度格式问题。

 

6、改进横轴

同时还会出现2个问题,(1)横轴也会出现标注也被默认为拥有1位小数的数字;(2)横轴两个柱体之间缺乏间距。

先解决第一个问题:横轴数据的单位是年,我们可以使用纵轴的方式通过tickDecimals属性,设置成0,但是这种做法并不是通用。如果横轴不是数字类型(比如队名),这种解决方案就是解决不了。为了适用更普遍的情况

我们首先改变一下数据结构,建立一个新的数组years,在这个数组中,每一个年份有一个索引数字配对。同时修改之前的wins数组,将原来的年份使用对应的索引数字替代,这样这两个数组建立了查询关系。


var wins = [
                [
                    [0, 13],
                    [1, 11],
                    [2, 15],
                    [3, 15],
                    [4, 18],
                    [5, 21],
                    [6, 28]
                ]
            ];
            var years = [[0,"2006"],[1,"2007"],[2,"2008"],[3,"2009"],[4,"2010"],[5,"2011"],[6,"2012"]];

然后,我们将新定义的years数组中的这些整数映射到对应的字符串上。我们这里的字符串映射到年份数字,如果需要可以以任何字符串代替。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,以下是一个使用Flotr2库绘制双柱形图的示例代码: ```html <!DOCTYPE html> <html> <head> <title>双柱形图</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flotr2/2.0.4/flotr2.min.js"></script> </head> <body> <div id="chart"></div> <script type="text/javascript"> var data = [ {label: '苹果', data: [[0, 5], [1, 10], [2, 15], [3, 20], [4, 25]]}, {label: '橙子', data: [[0, 7], [1, 12], [2, 17], [3, 22], [4, 27]]} ]; var options = { bars: { show: true, barWidth: 0.4, horizontal: false, fillOpacity: 0.8 }, grid: { verticalLines: false, horizontalLines: true }, xaxis: { ticks: [[0, '一月'], [1, '二月'], [2, '三月'], [3, '四月'], [4, '五月']] }, yaxis: { min: 0, max: 30, tickDecimals: 0 } }; Flotr.draw(document.getElementById("chart"), data, options); </script> </body> </html> ``` 在这个例子中,我们定义了两个数据系列(分别代表苹果和橙子的销售量),每个系列中包含五个数据点(分别代表每个月的销售量)。我们使用`bars`选项来绘制柱形图,`horizontal`选项为`false`表示竖直方向绘制,`barWidth`设置柱子宽度为0.4,`fillOpacity`设置柱子填充颜色的透明度为0.8。`grid`选项用于绘制网格线,`xaxis`和`yaxis`选项用于设置坐标轴。最后,我们使用`Flotr.draw()`函数将图表绘制到指定的`div`元素中。 ### 回答2: Flotr2是一个用于创建交互式图表的JavaScript库,它可以很容易地创建各种类型的图表,包括柱状图。下面是通过Flotr2库创建双柱的柱状图的示例代码: 首先,我们需要引入Flotr2库的JavaScript文件。可以在HTML文档中插入以下代码: ``` <script src="flotr2.min.js"></script> ``` 然后,创建一个包含柱状图的HTML容器: ``` <div id="chartContainer" style="width: 500px; height: 300px;"></div> ``` 接下来,使用JavaScript代码创建柱状图。可以在JavaScript文件中插入以下代码: ```javascript var data = [ {label: "柱1", data: [[0, 10], [1, 20], [2, 30]]}, {label: "柱2", data: [[0, 15], [1, 25], [2, 35]]} ]; var options = { bars: { show: true, barWidth: 0.5, lineWidth: 0, shadowSize: 0, fillOpacity: 0.8 }, yaxis: { min: 0, tickDecimals: 0 }, xaxis: { ticks: [[0, "X1"], [1, "X2"], [2, "X3"]] }, legend: { position: "ne" } }; Flotr.draw(document.getElementById("chartContainer"), data, options); ``` 上述代码中,`data`变量是一个包含两个柱状图数据的数组。每个柱状图都有一个`label`属性表示图例的文本,以及一个`data`属性表示柱状图的坐标点。 `options`变量包含了一些配置选项,用于设置柱状图的外观和行为。其中`bars`属性用于设置柱状图的样式,`yaxis`属性用于设置y轴的最小值和小数位数,`xaxis`属性用于设置x轴的刻度值,`legend`属性用于设置图例的位置。 最后,使用`Flotr.draw`函数将柱状图绘制到指定的HTML容器中。 以上就是利用Flotr2库创建双柱的柱状图的示例代码。你可以根据自己的需求修改数据和样式来创建不同的柱状图。 ### 回答3: 要利用Flotr2.min.js写一个双柱的柱状图,首先需要引入Flotr2.min.js文件,并在HTML页面中创建一个图表容器。 接下来,我们可以定义一个数据数组,其中包含两组数据,分别代表柱状图的两个柱子。每组数据可以是键值对的形式,其中键表示横坐标,值表示纵坐标。 接下来,可以创建一个选项对象,定义了图表的样式和配置。在选项对象中,我们可以设置图表的类型为"columns",表示是柱状图。还可以设置坐标轴的标签、标题、柱子的颜色、图例等等。 最后,调用Flotr.draw()方法,将图表容器和数据数组以及选项对象作为参数传入,即可绘制出一个双柱的柱状图。 以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <title>双柱状图</title> <script src="flotr2.min.js"></script> </head> <body> <div id="chart-container" style="width: 500px; height: 300px;"></div> <script> var data = [ {x: 1, y: 10}, {x: 2, y: 15}, {x: 3, y: 20} ]; var data2 = [ {x: 1, y: 12}, {x: 2, y: 18}, {x: 3, y: 25} ]; var options = { colors: ['#FF6600', '#00FF00'], bars: { show: true, horizontal: false, shadowSize: 0, barWidth: 0.5 }, grid: { verticalLines: false }, yaxis: { min: 0, max: 30 }, legend: { position: 'ne', backgroundColor: '#FFFFFF' } }; Flotr.draw(document.getElementById("chart-container"), [data, data2], options); </script> </body> </html> ``` 这段代码会在页面上绘制出一个宽度为500px,高度为300px的双柱状图,其中包含两组数据,柱子的颜色分别为橙色和绿色。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值