艺宵网 资源分享 高性能零依赖的Web开发SVG库–FrappeCharts

高性能零依赖的Web开发SVG库–FrappeCharts

介绍 今天介绍一个小巧的Web端的SVG图表库,FrappeCharts是受GitHub启发的简单且现代的SV…

高性能零依赖的Web开发SVG库——FrappeCharts

介绍

今天介绍一个小巧的Web端的SVG图表库,FrappeCharts是受GitHub启发的简单且现代的SVG图表,零依赖性。相比市面很多类似的库,FrappeCharts显得相当轻量了!


高性能零依赖的Web开发SVG库——FrappeCharts

Github

https://github.com/frappe/charts

安装使用

  • 安装
yarn add frappe-gantt

或直接将其包含在HTML中

  <script src="https://unpkg.com/frappe-charts@latest">script>
  • 用法

并将其包含在您的项目中

  import { Chart } from "frappe-charts"

初始化一个新的Charts对象

  new Chart();          // ES6 module
			// or
  new frappe.Chart();   // Browser
  • 图表制作
 let chart = new frappe.Chart( "#frost-chart", {
	data: {
	labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
		"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

	datasets: [
		{
			name: "Some Data", chartType: \'bar\',
			values: [25, 40, 30, 35, 8, 52, 17, -4]
		},
		{
			name: "Another Set", chartType: \'bar\',
			values: [25, 50, -10, 15, 18, 32, 27, 14]
		},
		{
			name: "Yet Another", chartType: \'line\',
			values: [15, 20, -3, -15, 58, 12, -17, 37]
		}
	],

	yMarkers: [{ label: "Marker", value: 70,
		options: { labelPos: \'left\' }}],
	yRegions: [{ label: "Region", start: -10, end: 50,
		options: { labelPos: \'right\' }}]
	},

	title: "My Awesome Chart",
	type: \'axis-mixed\', // or \'bar\', \'line\', \'pie\', \'percentage\'
	height: 300,
	colors: [\'purple\', \'#ffa3ef\', \'light-blue\'],

	tooltipOptions: {
		formatTooltipX: d => (d   \'\').toUpperCase(),
		formatTooltipY: d => d   \' pts\',
	}
  });

  chart.export();
高性能零依赖的Web开发SVG库——FrappeCharts
高性能零依赖的Web开发SVG库——FrappeCharts
高性能零依赖的Web开发SVG库——FrappeCharts
高性能零依赖的Web开发SVG库——FrappeCharts
高性能零依赖的Web开发SVG库——FrappeCharts
高性能零依赖的Web开发SVG库——FrappeCharts
 let heatmap = new frappe.Chart("#heatmap", {
	type: \'heatmap\',
	title: "Monthly Distribution",
	data: {
	dataPoints: {
		\'1524064033\': 8, /* ... */},
						// 带有时间戳-值对的对象
		start: startDate
		end: endDate      // 日期对象
	},
	countLabel: \'Level\',
	discreteDomains: 0  // default: 1
	colors: [\'#ebedf0\', \'#c0ddf9\', \'#73b3f3\', \'#3886e1\', \'#17459e\'],
				
  });

总结

由于FrappeCharts受了Github的启发,其风格和Github类似,足够轻量,功能在不是特别复杂需求的情况下完全够用,enjoy it!

本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。http://www.yixao.net/share/10012.html
Vedu

作者: Vedu

这个人很懒,什么都没有留下~

发表评论

联系我们

联系我们

15378714280

在线咨询: QQ交谈

邮箱: yixaonet@163.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部