oughViz图表库-https
在通信目标是显示意图或普遍性而非绝对精度的地方,请使用手绘图。或者仅仅是因为它们很有趣并且看起来很酷。
(https://github.com/jwilber/roughViz#Bar)
Github上的roughViz图表库源代码—
oughViz库包含的内容
以下是当前可用的图表类型(更多内容即将推出):
· 条形(roughViz.Bar)-完整的API文档。
oughviz条形示例—
· 单杠(roughViz.BarH)—在此处查看完整的API。
rawviz单杠示例—
· 甜甜圈(roughViz.Donut)
甜甜圈图示例-
· 第(roughViz.Line)行-API
折线图示例-
· 饼图(roughViz.Pie)
饼图演示—
· 散点图(roughViz.Scatter)
散点图示例-
入门
通过CDN:
<script src =" https://unpkg.com/rough-viz@1.0.2"> </ script>
通过npm:
npm install rough-viz
想要搭配使用React?有一个包装。
npm install react-roughviz
如何使用
创建一些容器元素,每个图表一个:
<!--you can name each id whatever you want --> <div id="viz0"></div> <div id="viz1"></div>
要创建图表,请引用所需的容器,然后将数据传递给roughViz构造函数。
// create donut chart from csv file, using default options new roughViz.Bar({ element: '#vis0', // container selection data: 'https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv', labels: 'flavor', values: 'price' }); // create Donut chart using defined data & customize plot options new roughViz.Donut( { element: '#vis1', data: { labels: ['North', 'South', 'East', 'West'], values: [10, 5, 8, 3] }, title: "Regions", width: window.innerWidth / 4, roughness: 8, colors: ['red', 'orange', 'blue', 'skyblue'], stroke: 'black', strokeWidth: 3, fillStyle: 'cross-hatch', fillWeight: 3.5, } );
样式表
有样式图表方式主要有三种- roughness,fillStyle和fillWeight
粗糙度
fillStyle
fillWeight
包括更多其他特定于图表的选项- 有关更多信息,。
感谢您的阅读,并保持出色!
挑战30天在头条写日记#
颜色插件
Chart.js 品牌颜色的默认调色板可作为内置的省时零配置插件使用。
Tree-shaking
通过仅注册必要的组件,JavaScript 包的大小可以减少数十千字节。
规模堆叠
布局框可以按组堆叠和加权。
字幕插件
辅助标题插件,具有与主标题相同的所有选项。
线段样式
线段可以根据任何用户定义的标准设置样式。
3.0新功能高级动画
每个元素中每个属性的转换都可以单独且独立地配置。
新功能表现!
引入了许多性能增强功能。此示例具有 1M (2x500k) 点,启用了新的抽取插件。
2.0新功能混合图表类型
混合搭配条形图和折线图,以在数据集之间提供清晰的视觉区分。
2.0新功能新的图表轴类型
轻松绘制日期时间、对数甚至完全自定义比例的复杂、稀疏数据集。
2.0新功能动画一切!
更改数据、更新颜色和添加数据集时,开箱即用的令人惊叹的过渡。
在此示例中,我们为单个数据集创建条形图并将其呈现在 HTML 页面上。将此代码片段添加到您的页面:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
你应该得到一个像这样的图表:
让我们分解一下这段代码。
首先,我们的页面中需要有一个画布。建议为图表提供自己的容器以提高响应能力。
<div>
<canvas id="myChart"></canvas>
</div>
现在我们有了画布,我们可以包含来自 CDN 的 Chart.js。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
最后,我们可以创建一个图表。我们添加一个脚本,该脚本获取myChart画布元素并new Chart使用所需的配置进行实例化:bar图表类型、标签、数据点和选项。
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
图表类型和元素、数据集、自定义、插件、组件和 tree-shaking。不要犹豫,点击文本中的链接。
我们将从头开始使用几个图表构建 Chart.js 数据可视化:
使用 Chart.js 构建新应用程序
在新文件夹中,创建package.json包含以下内容的文件:
{
"name": "chartjs-example",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"devDependencies": {
"parcel": "^2.6.2"
},
"dependencies": {
"@cubejs-client/core": "^0.31.0",
"chart.js": "^4.0.0"
}
}
现代前端应用程序经常使用 JavaScript 模块捆绑器,因此我们选择Parcel 作为一个很好的零配置构建工具。我们还安装了 Chart.js v4 和Cube 的 JavaScript 客户端,这是一个用于数据应用程序的开源 API,我们将使用它来获取真实世界的数据(稍后会详细介绍)。
运行npm install、yarn install、 或pnpm install安装依赖项,然后创建src文件夹。在该文件夹中,我们需要一个非常简单的index.html文件:
<!doctype html>
<html lang="en">
<head>
<title>Chart.js example</title>
</head>
<body>
<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
<div style="width: 800px;"><canvas id="acquisitions"></canvas></div>
<!-- <script type="module" src="dimensions.js"></script> -->
<script type="module" src="acquisitions.js"></script>
</body>
</html>
正如您所看到的,Chart.js 需要最少的标记:canvas带有 的标记id,我们稍后将通过它引用图表。默认情况下,Chart.js 图表是响应式的,并占据整个封闭容器。所以,我们设置宽度div来控制图表的宽度。
最后,让我们创建src/acquisitions.js包含以下内容的文件:
import Chart from 'chart.js/auto'
(async function() {
const data = [
{ year: 2010, count: 10 },
{ year: 2011, count: 20 },
{ year: 2012, count: 15 },
{ year: 2013, count: 25 },
{ year: 2014, count: 22 },
{ year: 2015, count: 30 },
{ year: 2016, count: 28 },
];
new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
})();
让我们看一下这段代码:
是时候使用npm run dev、yarn dev、 或运行示例并在 Web 浏览器中pnpm dev导航到localhost:1234 了:
只需几行代码,我们就得到了一个具有很多功能的图表:图例、网格线、刻度线和悬停时显示的工具提示。刷新网页几次即可看到图表也是动画的。尝试单击“按年份获取”标签,您会发现您还可以切换数据集可见性(当您有多个数据集时特别有用)。
简单的定制
让我们看看如何自定义 Chart.js 图表。首先,让我们关闭动画,以便立即显示图表。其次,让我们隐藏图例和工具提示,因为我们只有一个数据集和相当琐碎的数据。
将调用new Chart(...);替换src/acquisitions.js为以下代码片段:
new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
options: {
animation: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
}
},
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
正如您所看到的,我们已将该options属性添加到第二个参数中,这样您就可以为 Chart.js 指定各种自定义选项。通过提供的布尔标志禁用动画animation。大多数图表范围的选项(例如,响应能力或设备像素比)都是这样配置的。
图例和工具提示隐藏在plugins. 请注意,Chart.js 的一些功能被提取到插件中:独立的、独立的代码片段。其中一些插件作为Chart.js 发行版 的一部分提供,其他插件是独立维护的,并且可以位于很棒的 插件、框架集成和其他图表类型列表中。
您应该能够在浏览器中看到更新后的简约图表。
真实世界数据
对于硬编码、有限大小、不切实际的数据,很难展示 Chart.js 的全部潜力。让我们快速连接到数据 API,以使我们的示例应用程序更接近生产用例。
让我们创建src/api.js包含以下内容的文件:
import { CubejsApi } from '@cubejs-client/core';
const apiUrl = 'https://heavy-lansford.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1';
const cubeToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjEwMDAwMDAwMDAsImV4cCI6NTAwMDAwMDAwMH0.OHZOpOBVKr-sCwn8sbZ5UFsqI3uCs6e4omT7P6WVMFw';
const cubeApi = new CubejsApi(cubeToken, { apiUrl });
export async function getAquisitionsByYear() {
const acquisitionsByYearQuery = {
dimensions: [
'Artworks.yearAcquired',
],
measures: [
'Artworks.count'
],
filters: [ {
member: 'Artworks.yearAcquired',
operator: 'set'
} ],
order: {
'Artworks.yearAcquired': 'asc'
}
};
const resultSet = await cubeApi.load(acquisitionsByYearQuery);
return resultSet.tablePivot().map(row => ({
year: parseInt(row['Artworks.yearAcquired']),
count: parseInt(row['Artworks.count'])
}));
}
export async function getDimensions() {
const dimensionsQuery = {
dimensions: [
'Artworks.widthCm',
'Artworks.heightCm'
],
measures: [
'Artworks.count'
],
filters: [
{
member: 'Artworks.classification',
operator: 'equals',
values: [ 'Painting' ]
},
{
member: 'Artworks.widthCm',
operator: 'set'
},
{
member: 'Artworks.widthCm',
operator: 'lt',
values: [ '500' ]
},
{
member: 'Artworks.heightCm',
operator: 'set'
},
{
member: 'Artworks.heightCm',
operator: 'lt',
values: [ '500' ]
}
]
};
const resultSet = await cubeApi.load(dimensionsQuery);
return resultSet.tablePivot().map(row => ({
width: parseInt(row['Artworks.widthCm']),
height: parseInt(row['Artworks.heightCm']),
count: parseInt(row['Artworks.count'])
}));
}
让我们看看那里发生了什么:
现在,让我们将真实世界的数据传递到我们的图表中。请进行一些更改src/acquisitions.js:添加导入并替换data变量的定义。
import { getAquisitionsByYear } from './api'
// ...
const data = await getAquisitionsByYear();
完毕!现在,我们的真实数据图表如下所示。看来1964年、1968年和2008年发生了一些有趣的事情!
我们已经完成了条形图。让我们尝试另一种 Chart.js 图表类型。
进一步定制
Chart.js 支持许多常见的图表类型。
例如,气泡图允许同时显示三个维度的数据:x和y轴上的位置代表两个维度,第三个维度由单个气泡的大小表示。
要创建图表,请停止已运行的应用程序,然后转到src/index.html并取消注释以下两行:
<div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/>
<script type="module" src="dimensions.js"></script>
然后,创建src/dimensions.js包含以下内容的文件:
import Chart from 'chart.js/auto'
import { getDimensions } from './api'
(async function() {
const data = await getDimensions();
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
data: {
labels: data.map(x => x.year),
datasets: [
{
label: 'Dimensions',
data: data.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
}
]
}
}
);
})();
也许,一切都非常简单:我们从 API 获取数据并渲染一个具有该类型的新图表,将三个维度的数据作为、和(半径)属性bubble传递。xyr
现在,使用 、 或 重置缓存并再次启动rm -rf .parcel-cache应用程序。我们现在可以查看新图表:npm run devyarn devpnpm dev
嗯,看起来不太漂亮。
首先,图表不是正方形的。艺术品的宽度和高度同样重要,因此我们希望图表的宽度也等于其高度。默认情况下,Chart.js 图表的纵横比为 1(对于所有径向图表,例如圆环图)或 2(对于所有其他图表)。让我们修改图表的纵横比:
// ...
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
options: {
aspectRatio: 1,
},
// ...
现在看起来好多了:
然而,这仍然不理想。水平轴的范围从 0 到 500,垂直轴的范围从 0 到 450。默认情况下,Chart.js 会自动将轴的范围(最小值和最大值)调整为数据集中提供的值,因此图表“适合“你的数据。显然,MoMa 收藏中没有高度在 450 至 500 厘米范围内的艺术品。让我们修改图表的轴配置来解决这个问题:
// ...
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
options: {
aspectRatio: 1,
scales: {
x: {
max: 500
},
y: {
max: 500
}
}
},
// ...
伟大的!看一下更新后的图表:
然而,还有一个问题:这些数字是多少?单位是厘米不是很明显。让我们对两个轴应用自定义刻度格式以使事情变得清晰。我们将提供一个回调函数,调用该函数来格式化每个刻度值。这是更新后的轴配置:
// ...
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
options: {
aspectRatio: 1,
scales: {
x: {
max: 500,
ticks: {
callback: value => `${value / 100} m`
}
},
y: {
max: 500,
ticks: {
callback: value => `${value / 100} m`
}
}
}
},
// ...
完美,现在我们在两个轴上都有合适的单位:
多个数据集
Chart.js 独立绘制每个数据集,并允许对它们应用自定义样式。
看一下图表:有一条可见的气泡“线”,其等号x和y坐标代表方形艺术品。将这些气泡放入自己的数据集中并以不同的方式绘制它们会很酷。此外,我们可以将“较高”的艺术品与“较宽”的艺术品分开,并以不同的方式绘制它们。
我们可以这样做。将其替换datasets为以下代码:
// ...
datasets: [
{
label: 'width = height',
data: data
.filter(row => row.width === row.height)
.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
},
{
label: 'width > height',
data: data
.filter(row => row.width > row.height)
.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
},
{
label: 'width < height',
data: data
.filter(row => row.width < row.height)
.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
}
]
// ..
如您所见,我们定义了三个具有不同标签的数据集。每个数据集都有自己的使用 提取的数据片段filter。现在,它们在视觉上是不同的,而且正如您所知,您可以独立切换它们的可见性。
这里我们依赖默认的调色板。但是,请记住,每种图表类型都支持许多数据集选项,您可以随意自定义。
插件
另一种非常强大的自定义 Chart.js 图表的方法是使用插件。您可以在插件目录 中找到一些或创建您自己的临时插件。在 Chart.js 生态系统中,这是惯用的,并且期望通过插件来微调图表。例如,您可以自定义画布背景或使用简单的临时插件为其添加边框。让我们尝试一下后者。
插件具有广泛的 API,但简而言之,插件被定义为name具有扩展点中定义的一个或多个回调函数的对象。new Chart(...);在调用之前插入以下代码片段来代替src/dimensions.js:
// ...
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const { ctx, chartArea: { left, top, width, height } } = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
plugins: [ chartAreaBorder ],
options: {
plugins: {
chartAreaBorder: {
borderColor: 'red',
borderWidth: 2,
borderDash: [ 5, 5 ],
borderDashOffset: 2,
}
},
aspectRatio: 1,
// ...
正如您所看到的,在这个chartAreaBorder插件中,我们获取画布上下文,保存其当前状态,应用样式,在图表区域周围绘制矩形,然后恢复画布状态。我们还传递了该插件,plugins因此它仅适用于这个特定的图表。我们还将插件选项传递给options.plugins.chartAreaBorder; 我们当然可以在插件源代码中对它们进行硬编码,但这种方式可重用性更高。
我们的气泡图现在看起来更漂亮了:
摇树
在生产中,我们努力交付尽可能少的代码,以便最终用户可以更快地加载我们的数据应用程序并获得更好的体验。为此,我们需要应用tree-shaking ,这是一个奇特的术语,用于从 JavaScript 包中删除未使用的代码。
Chart.js 的组件设计完全支持 tree-shaking。您可以一次注册所有 Chart.js 组件(这在您进行原型设计时很方便)并将它们与您的应用程序捆绑在一起。或者,您可以仅注册必要的组件并获得最小的捆绑包,其大小要小得多。
让我们检查一下我们的示例应用程序。捆绑包尺寸是多少?您可以停止应用程序并运行npm run build, 或yarn build, 或pnpm build。片刻之后,您将得到如下信息:
% yarn build
yarn run v1.22.17
$ parcel build src/index.html
✨ Built in 88ms
dist/index.html 381 B 164ms
dist/index.74a47636.js 265.48 KB 1.25s
dist/index.ba0c2e17.js 881 B 63ms
✨ Done in 0.51s.
我们可以看到 Chart.js 和其他依赖项被捆绑在一个 265 KB 文件中。
src/acquisitions.js为了减小包的大小,我们需要对和进行一些更改src/dimensions.js。首先,我们需要从两个文件中删除以下导入语句:import Chart from 'chart.js/auto'.
相反,我们只加载必要的组件并使用 Chart.js“注册”它们Chart.register(...)。这是我们需要的src/acquisitions.js:
import {
Chart,
Colors,
BarController,
CategoryScale,
LinearScale,
BarElement,
Legend
} from 'chart.js'
Chart.register(
Colors,
BarController,
BarElement,
CategoryScale,
LinearScale,
Legend
);
这是以下代码片段src/dimensions.js:
import {
Chart,
Colors,
BubbleController,
CategoryScale,
LinearScale,
PointElement,
Legend
} from 'chart.js'
Chart.register(
Colors,
BubbleController,
PointElement,
CategoryScale,
LinearScale,
Legend
);
您可以看到,除了Chart类之外,我们还加载图表类型、比例和其他图表元素(例如,条形图或点)的控制器。您可以在文档中查找所有可用的组件。
或者,您可以按照控制台中的 Chart.js 建议进行操作。例如,如果您忘记导入BarController条形图,您将在浏览器控制台中看到以下消息:
Unhandled Promise Rejection: Error: "bar" is not a registered controller.
chart.js/auto请记住在准备生产应用程序时仔细检查进口。只需要一次这样的导入就可以有效地禁用树摇动。
现在,让我们再次检查我们的应用程序。运行yarn build你会得到这样的结果:
% yarn build
yarn run v1.22.17
$ parcel build src/index.html
✨ Built in 88ms
dist/index.html 381 B 176ms
dist/index.5888047.js 208.66 KB 1.23s
dist/index.dcb2e865.js 932 B 58ms
✨ Done in 0.51s.
过仅导入和注册选定的组件,我们删除了超过 56 KB 的不必要代码。鉴于其他依赖项在捆绑包中占用约 50 KB,tree-shaking 有助于从我们的示例应用程序的捆绑包中删除约 25% 的 Chart.js 代码。
项目地址:https://github.com/chartjs/Chart.js
辑导读:在用Axure绘制原型时,可以通过内联框架引入echarts动态图表、视频等来让原型看起来更为高大上。具体应该如何操作呢?本文作者对此进行了分析,希望对你有帮助。
Axure绘制原型时,如何让原型看起来更为高大上?我们可以在制作原型时通过内联框架引入echarts动态图表、视频等。
效果预览:
引入echarts渐变堆叠面积图-预览:
引入视频-预览:
1)添加内联框架
Axure新建页面,在基本元件中选择【内联框架】,拖拽进页面,点击【样式】,勾选隐藏边框;
2)选择echarts图表
进入echarts官网:https://echarts.apache.org/examples/zh/index.html;选择你需要插入Axure中的图表;
进入所选的图表中,可以对其数据进行修改,修改成自己想要的数据;如下图所示:
点击【下载示例】,将修改过后的echarts图表以html文件格式下载下来;
3)将下载下来的图表引入到内联框架中
注:【链接一个外部的URL或文件】支持三种引入,相对路径、绝对路径很根路径;
以下我是通过根目录的方式引入html文件;需要将下载好的图表html文件放入原型所生成html根目录文件夹下;
双击内联框架,弹出链接属性,选择【链接一个外部的URL或文件】,填入echarts图表全称。
注意:这时只有生成HTML才可以看到图表信息,如果直接点击预览,会报错【File Not Found】。
1)添加内联框架
同上。
2)通过内联框架引入视频
通过内联框架引入视频有两种方式,一种引入本地视频文件、另外一种引入在线视频。
引入本地视频:
将视频文件放入原型所生成html根目录文件夹下;
双击内联框架,弹出链接属性,选填入本地视频全称。
引入在线视频:
在这里,我以引入哔哩哔哩视频为例,进入哔哩哔哩网站,选择需要引入的视频,点【转发】按钮,复制【嵌入代码】;如下图所示:
将代码填入【链接一个外部的URL或文件】中,删除下图中红框框起来的部分,然后前面加入https: , 最终如右图所示。
本文由 @小青 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议
*请认真填写需求信息,我们会在24小时内与您取得联系。