Vue是单页应用程序中最具响应性和进步性的框架之一,并且拥有轻量级的图表组件。它有一种灵活的方式将各种图表添加到web组件中。有多种方法可以在图表中显示您的数据。本文将讨论在Vue中使用jQWidgets图表组件。
我们需要节点8来安装Vue命令行界面。通过以下方式检查节点版本node –v
。如果需要,可以使用升级节点版本npm install npm@latest –g
。
命令行界面代表命令行界面,Vue命令行界面提供全面快速的Vue.js开发。要安装命令行界面,请使用以下命令:
npm i -g @vue/cli
要使用命令行界面创建Vue项目,请键入以下Vue命令行界面命令:
Vue create jqwidgets-vue-cli-app
npm install jqwidgets-scripts –-save--dev
这将开始创建项目,然后项目将显示一个选项来选择默认预设或手动选择特征。手动选择项目的特征。创建项目后,您可以使用以下命令在服务器上运行它:
npm run serve
我们的项目将在localhost:8080。
一旦项目被创建,我们将有一个如下所示的项目结构。
您可以从下面的源代码中获得package.json文件的配置。所有需要的模块都包括在内。
{
"name": "vue",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
{
"dependencies": {
"jqwidgets-scripts": "~6.1.0",
"vue": "^2.5.16"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.9",
"@vue/cli-plugin-eslint": "^3.0.0-beta.9",
"@vue/cli-service": "^3.0.0-beta.9",
"vue-template-compiler": "^2.5.13"
},
"babel": {
"presets": [ "@vue/app" ] },
"eslintConfig": {
"root": true,
"extends": [
"plugin:vue/essential",
"eslint:recommended" ]
},
"postcss": {
"plugins": { "autoprefixer": {} }
},
"browserslist": ["> 1%", "last 2 versions", "not ie <= 8" ]
}
在package.json准备好之后,键入npm install
进入你的命令行界面。
要使用jQWidgets创建简单的图表应用程序,请在App.vue类的脚本部分导入JqxChart。
<script>
import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
</script>
另外,将JqxChart添加到App.vue的组件部分。
components: {
JqxChart
},
使用<模板>部分定义图表属性。这些属性定义了图表样式、标题、轴值和图例。
<template>
<JqxChart style="width: 850px; height: 500px"
:title="'Fitness and exercise weekly scorecard'"
:description="'Time spent in vigorous exercise by activity'"
:showLegend="true" :enableAnimations="true" :padding="padding"
:titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
:valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
</JqxChart>
</template>
设置可在中定义的< JqxChart/>组件的属性return
的对象data
功能。
data: function () {
return {
sampleData: [
// SET SAMPLE DATA
],
padding: { left: 10, top: 10, right: 15, bottom: 10 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
xAxis: {
dataField: 'Day',
unitInterval: 1,
tickMarks: { visible: true, interval: 1 },
gridLinesInterval: { visible: true, interval: 1 },
valuesOnTicks: false,
padding: { bottom: 10 }
},
valueAxis: {
unitInterval: 10,
minValue: 0,
maxValue: 50,
title: { text: 'Time in minutes<br><br>' },
labels: { horizontalAlignment: 'right' }
},
//…
要动态设置数据,请使用url: field
。同样,我们可以设置数据类型;在这个例子中,我们使用JSON。
url: "GetData/ItemsList.txt"
datatype: "JSON"
图表类型及其属性在中设置seriesGroup
,例如线系列或气泡系列,如下所示:
seriesGroups: [{
type: 'line',
series: [{
dataField: 'Swimming',
symbolType: 'square',
labels: {
visible: true,
backgroundColor: '#FEFEFE',
backgroundOpacity: 0.2,
borderColor: '#7FC4EF',
borderOpacity: 0.7,
padding: {
left: 5,
right: 5,
top: 0,
bottom: 0
}
}
},
{
dataField: 'Running',
symbolType: 'square',
labels: {
visible: true,
backgroundColor: '#FEFEFE',
backgroundOpacity: 0.2,
borderColor: '#7FC4EF',
borderOpacity: 0.7,
padding: {
left: 5,
right: 5,
top: 0,
bottom: 0
}
}
}
]
}]
完成此操作后,要查看页面上的图表,请运行Vue CLI开发服务器,然后转到localhost:8080。为此,请再次运行以下命令:
npm run serve
使用这些属性和设置,我们得到下面带有系列类型线的图表。
通过创建这个简单的图表,我们将了解不同的图表系列及其设置。
像“线和面积系列”、“柱形图和条形图系列”和“散点图”这样的系列是常用的,而“饼图和圆环图系列”、“瀑布图”、“极坐标和蜘蛛图系列”等则是常用的。,用于显示特定数据。
这是一个显示测量数据大小的柱形图。根据属性和设置,我们可以创建列系列、堆叠列系列、创建100%堆叠列系列和使用列范围系列。以下是这些系列类型的属性及其设置列表。
列系列:这是一个基本的列系列类型,列系列覆盖选项为假。
堆叠列系列:要显示堆叠列中的数据,请将系列类型设置为“stackedcolumn
“
100%堆叠柱系列:在本系列中,我们以百分比的形式显示数据。如果系列类型为stackcolumn100
,我们需要设置columnGapPercentage
和seriesGapPercentage
。
列范围:我们可以在x/y轴范围内设置列。下面是一个例子seriesGroups
一系列类型的columnrange
和样条。
柱形图有一种灵活的方法,可以使用不同的条件为列设置不同的颜色,例如用不同的颜色设置负值。它们也可以用于缺少值的数据集和带有标签的系列。
这用于显示顺序数据的累积效应。
这些用于表示财务数据,每个期间有高、低、开放和关闭的数量。系列组类型为“candlestick
。“这个例子在图表的底部显示了一个范围选择器,它设置了一个在x轴显示烛台系列使用的数据范围。
这些基本上是以系列类型作为列的柱形图。要定义漏斗或金字塔形状columnsTopWidthPercentage
和columnsBottomWidthPercentage
使用设置。
seriesGroups: [{
type: 'column',
columnsGapPercent: 20,
seriesGapPercent: 20,
columnsTopWidthPercent: 100,
columnsBottomWidthPercent: 30,
series: [{
dataField: 'SerieA',
displayText: 'Serie A',
labels: {
visible: true
}
},
{
dataField: 'SerieB',
displayText: 'Serie B',
labels: {
visible: true
}
},
{
dataField: 'SerieC',
displayText: 'Serie C',
labels: {
visible: true
}
}
]
}]
Vue图表可以与其他功能相结合。下面是我们可以使用的功能列表。
缩放:我们可以选择创建一个rangeSelector
选择显示图表的x轴范围。这将缩放选定范围的图表,同时轴值也会相应调整。
对数轴:通过设置的属性,可以根据对数基数设置轴值logarithmicScale
真实可信logarithmicScaleBase
有10或2个。
实时更新:图表可以用于数据每秒钟都在变化的场景。我们可以安装一个功能来设置时间间隔,单位为毫秒。
不同的风格可以用来设置轴,图例,标题,网格线等。这增强了图表功能。还可以使用自定义方法和事件添加自定义功能。
图表可以作为图像打印和导出,并且可以与选项卡和网格集成。
面向Vue的jQWidgets图表为下一代支持云的网络应用程序提供了高级和可定制的功能。图表是一种独立于设备、平台和浏览器的插件式免费数据可视化工具。它支持多个数据源并处理大型数据集。还支持各种类型的系列。本文中很少描述它们。