提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
Tableau是新一代商业智能工具软件，它将数据连接、运算、分析与图表结合在
一起，通过拖放方式创建各种图表。
一、Tableau是什么？
Tableau产品包括TableauDesktop、Tableauserver、TableauPublic、Tableau Online和Tableaureader等多种。其中，TableauDesktop、TableauServer、TableauReader使用最多。
本次基础实验使用TableauDesktop。TableauDesktop是一款基于斯坦福大学突破性技术的桌面软件应用程序，分为个人版和专业版。TableauDesktop能连接到许多数据源，如Access、Excel、文本文件、DB2、MSSQLServer、Sybase等。在获取数据源中的各类结构化数据后，TableauDesktop可以通过拖放式界面快速地生成各种美观的图表、坐标图、仪表盘与报告，并允许用户以自定义的方式设置视图、布局、形状、颜色等，从而通过各种视角来展现业务领域数据及其内在关系。
二、Tableau功能
1.初始界面介绍
界面的左边指示数据的来源，Tableau可以连接到本地的Excel表格，文本，Access数据库，统计文件等，也可以连接数据库服务器，例如MicrosoftSQLServer数据库，MySQL数据库，Oracle数据库等。左边最下面显示了已保存的数据源。中间上部分显示最近打开过的工作薄，下部分显示示例工作薄，即Tableau自带的一些工作薄，可以点击更多样本查看更多的数据图。右边显示了探索，每周精选以及Tableau一些社区，博客，新闻等等。第一次运行该软件，可以点击某一个示例工作薄，查看该软件数据展示的图示，以及如何简单操作。
2.数据示例(超市)
本次入门实践使用自带的超市工作簿。
点击上图示左侧“已保存数据源”下的“示例-超市”。打开界面后，点击左下角的“数据源”，结果如下。
左边列出了超市这个表格下的三个子工作表，当我们选中一个子表时，双击，在右边区域的下部分就会显示子表的数据，例如,双击销售人员，则显示具体销售人员表信息。还可以点击右上角的“筛选器”的“添加”，按需要进行数据过滤。
上图对制造商进行了筛选，选中Acco，Accos，BIC后的结果如下：
在界面的右下角可以新建一个工作表或者直接用软件默认打开的工作表1。这里打开默认工作表1，市超市订单中的数据。左侧就是这个表格的为维度和度量。
维度通常是类别字段，例如“产品”和“地区”。具体来说，Tableau中的维度用于设置粒度，即视图中的详细级别。
度量通常是指标，即数字数据，例如“销售额”。
大多数情况下，为欸都市离散的，而度量是连续的。
三、Tableau的一些基础操作
制作中国各个地区的利润图表
将国家和地区维度拖到列，把利润度量拖到行，即可制作出一个简单的条形图。Tableau最具有特色的功能就是拖放式的操作，只需要把维度以及度量拖到适当的位置，即可制作数据图表。
点击右上角的“智能显示”，还可以把同样的数据显示成不同形式的图表。例如，点击填充气泡图，即可制作出漂亮的类别和地区的气泡图。
点击单个气泡会显示销售额。
4、制作填充地球图。
用Excel制作填充地球图十分复杂，但是Tableau制作填充地球图却十分方便，一键生成。Tableau将数据分为：数字（十进制），数字（整数），字符串，布尔，日期，日期和时间，还有地理类型（如果数据源中有城市，省份的数据可以分配为地理类型）。选择任意一个字段，单击鼠标右键，在菜单中指向“更改数据类型”即可查看该字
段的默认类型，也可更改其数据类型。
制作填充地球图首先必须先将国家、城市、地区和省/自治区字段的属性改成地理维度。
然后，制作中国各个省份利润填充地球图，这里需要将国家和省/自治区维度拖到列，把利润拖到行，再点击“智能显示”里的填充气球图。
5、制作中国各个省份地区的利润仪表板。仪表板中想同时显示出“产品子类别利润条形图”、“产品销售数量气泡图”、“省份利润地图”三种图表。首先在Tableau中分别建立“产品子类别利润条形图”、“产品销售数量气泡图”、“省份利润地图”三个工作图表。如下图：
下面开始建立仪表板。在Tableau的菜单中选择“仪表板”，选择“新建仪表板”。
在左下角选中“显示仪表板标题”，然后双击顶端的“仪表板1”，修改标题内容为“相关信息比较图”，可对标题做格式化操作，改变其大小、显示位置和颜色等属性。这是新建仪表板的标题，放在最顶部。
然后，在左侧的对象中双击“水平”对象，则在中间空白处添加了一个水平对象。
对水平对象的高度进行调整，大小设为300。
然后，将“产品子类别利润条形图”、“产品销售数量气泡图”工作表拖进这个水平对象里，并排放置。
四、D3数据可视化
D3的全称是（Data-DrivenDocuments），是一个被数据驱动的文档，其实就是一个JavaScript的函数库，使用它主要是用来做数据可视化的。本次实践主要介绍D3一些最基本的使用方法，以及生成一些比较简单的图表。D3是一个JavaScript函数库。它只有一个文件，在HTML中引用即可。有两种方法：
（1）下载D3.js的文件，解压后，在HTML文件中包含相关的js文件即可。
（2）还可以直接包含网络的链接，这种方法较简单：
<scriptsrc="http://d3js.org/d3.v3.min.js"charset=“utf-8”>
但使用的时候要保持网络连接有效，不能再断网的情况下使用。
D3可以接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值
对），可以处理JSON和GeoJSON。
1.绘制柱形图
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3.js 柱形图</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: orange;
}
.axis-label {
font-size: 14px;
}
</style>
</head>
<body>
<svg width="600" height="400"></svg>
<script>
const data = [30, 80, 45, 60, 20, 90, 55];
const width = 600;
const height = 400;
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
const xScale = d3.scaleBand()
.domain(data.map((d, i) => i))
.range([margin.left, width - margin.right])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.nice()
.range([height - margin.bottom, margin.top]);
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", (d, i) => xScale(i))
.attr("y", d => yScale(d))
.attr("height", d => height - margin.bottom - yScale(d))
.attr("width", xScale.bandwidth());
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale).tickFormat(d => d + 1).tickSizeOuter(0))
.attr("class", "axis-label");
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale))
.attr("class", "axis-label");
</script>
</body>
</html>
2.制作动态柱形图
<html>
<head>
<meta charset="UTF-8">
<title>完整的柱形图</title>
<style>
.MyRect {
fill: skyblue;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: Arial;
font-size: 12px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// 画布尺寸配置
var width = 400;
var height = 400;
// 创建SVG画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 边距配置
var padding = {
left: 30,
right: 30,
top: 20,
bottom: 20
};
// 数据集
var dataset = [16, 23, 54, 46, 33, 24, 19, 37, 9];
// X轴比例尺（修正变量名）
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]);
// Y轴比例尺（保持yScale大小写一致）
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
// 定义坐标轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
// 矩形间距
var rectPadding = 4;
// 绘制矩形（修正所有yScale拼写）
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class", "MyRect")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d, i) {
return xScale(i) + rectPadding / 2;
})
.attr("width", xScale.rangeBand() - rectPadding)
.attr("y", function(d) {
return yScale(0); // 初始位置在底部
})
.attr("height", 0) // 初始高度为0
.transition()
.delay(function(d, i) {
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y", function(d) {
return yScale(d);
})
.attr("height", function(d) {
return height - padding.top - padding.bottom - yScale(d);
});
// 绘制文字标签（修正yScale拼写）
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class", "MyText")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d, i) {
return xScale(i) + rectPadding / 2;
})
.attr("dx", function() {
return (xScale.rangeBand() - rectPadding) / 2;
})
.attr("dy", "1.2em") // 优化文字垂直居中
.text(function(d) {
return d;
})
.attr("y", height - padding.bottom) // 初始位置在底部
.transition()
.delay(function(d, i) {
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y", function(d) {
return yScale(d) + 12; // 微调文字位置
});
// 添加X轴（取消注释）
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + ", " + (height - padding.bottom) + ")")
.call(xAxis);
// 添加Y轴（取消注释）
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + ", " + padding.top + ")")
.call(yAxis);
</script>
</body>
</html>
3.绘制饼图
<html>
<head>
<meta charset="utf-8" />
<title>饼状图</title>
</head>
<style>
.arc text {
font-family: Arial;
font-size: 12px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 400;
var height = 400;
var dataset = [11, 6, 34, 27, 13, 9];
// 创建SVG画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 饼图布局
var pie = d3.layout.pie();
var piedata = pie(dataset);
// 弧生成器
var outerRadius = 150;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
// 颜色比例尺
var color = d3.scale.category10();
// 绑定数据并绘制扇形
var arcs = svg.selectAll(".arc")
.data(piedata)
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"); // 居中
// 绘制扇形路径（修复语法错误）
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", function(d) {
return arc(d);
});
// 添加文字标签
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.data; // 显示原始数据值
});
</script>
</body>
</html>
4.绘制交互式饼图
<html>
<head>
<meta charset="utf-8" />
<title>交互式饼状图</title>
</head>
<style>
.arc text {
font-family: Arial;
font-size: 12px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 400;
var height = 400;
var dataset = [11, 6, 34, 27, 13, 9];
// 创建SVG画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 饼图布局
var pie = d3.layout.pie();
var piedata = pie(dataset);
// 弧生成器
var outerRadius = 150;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
// 颜色比例尺
var color = d3.scale.category10();
// 绑定数据并绘制扇形
var arcs = svg.selectAll(".arc")
.data(piedata)
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"); // 居中
// 绘制扇形路径（修复链式调用）
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", function(d) {
return arc(d);
})
// 添加交互事件（修复索引捕获）
.on("mouseover", function(d) {
d3.select(this)
.attr("fill", "yellow"); // 悬停时变黄
})
.on("mouseout", function(d) {
var index = d3.select(this).datum().index; // 获取当前数据的索引
d3.select(this)
.transition()
.duration(500)
.attr("fill", color(index)); // 恢复原色
});
// 添加文字标签
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.data; // 显示原始数据值
});
</script>
</body>
</html>
总结
本文对数据可视化的两种工具，Tableau 和 D3 进行了介绍和一些基础操作的演示，通过本文的操作，我对数据可视化的工具有了更多的了解。尤其是对html文件的编写规则有了一个初步认识。
扫一扫
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
