Vue.js的jQWidgets图表

简体中文 English

Vue是单页应用程序中最具响应性和进步性的框架之一，并且拥有轻量级的图表组件。它有一种灵活的方式将各种图表添加到web组件中。有多种方法可以在图表中显示您的数据。本文将讨论在Vue中使用jQWidgets图表组件。

Vue安装

我们需要节点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图表可以与其他功能相结合。下面是我们可以使用的功能列表。

  1. 缩放:我们可以选择创建一个rangeSelector选择显示图表的x轴范围。这将缩放选定范围的图表，同时轴值也会相应调整。

  2. 对数轴:通过设置的属性，可以根据对数基数设置轴值logarithmicScale真实可信logarithmicScaleBase有10或2个。

  3. 实时更新:图表可以用于数据每秒钟都在变化的场景。我们可以安装一个功能来设置时间间隔，单位为毫秒。

  4. 不同的风格可以用来设置轴，图例，标题，网格线等。这增强了图表功能。还可以使用自定义方法和事件添加自定义功能。

  5. 图表可以作为图像打印和导出，并且可以与选项卡和网格集成。

摘要

面向Vue的jQWidgets图表为下一代支持云的网络应用程序提供了高级和可定制的功能。图表是一种独立于设备、平台和浏览器的插件式免费数据可视化工具。它支持多个数据源并处理大型数据集。还支持各种类型的系列。本文中很少描述它们。