vue 图表组件_基于Vue.js中可用的JUI图表的Vue组件

vue-graph是一个基于Vue.js的组件库,它利用JUI图表提供多种图表功能,包括条形图、折线图、散点图等。组件允许添加小部件,如标题、图例和工具提示,以增强图表的可视化效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue 图表组件

可视图 (vue-graph)

A vue component library based on the JUI charts available in vuejs.

基于vuejs中可用的JUI图表的vue组件库。

安装 (Installation)

NPM (NPM)

npm install --save vue-graph

浏览器 (Browser)

Just download dist/vue-graph.js and include it in your HTML file:

只需下载dist/vue-graph.js并将其包含在您HTML文件中:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.rawgit.com/juijs/vue-graph/2216ae2f/dist/vue-graph.js"></script>

ES模块 (ES Modules)

插入 (Plug-In)
import Vue from 'vue'
import VueGraph from 'vue-graph'

Vue.use(VueGraph)
组件 (Components)
import Vue from 'vue'
import GraphLine3D from 'node_modules/vue-graph/src/components/line3d.js'
import NoteWidget from 'node_modules/vue-graph/src/components/widgets/note.js'
import LegendWidget from 'node_modules/vue-graph/src/components/widgets/legends.js'

Vue.component(GraphLine3D.name, GraphLine3D);
Vue.component(NoteWidget.name, NoteWidget);
Vue.component(LegendWidget.name, LegendWidget);

用法 (Usage)

Unlike other chart components, vue-graph have child nodes in the chart called widgets. The widget is used as an additional function of charts such as chart title, legend, tooltip.

与其他图表组件不同,vue-graph在图表中具有称为小部件的子节点。 该小部件用作图表的附加功能,例如图表标题,图例,工具提示。

The following is a link you can test with CodePen.

以下是您可以使用CodePen测试的链接。

<div id="app">
    <graph-line3d
            :width="800"
            :height="600"
            :axis-min="0"
            :axis-max="50"
            :padding-top="100"
            :padding-bottom="100"
            :depth="180"
            :labels="[ '1Q', '2Q', '3Q', '4Q' ]"
            :names="names"
            :values="values">
        <note :text="'3D-Line Chart'" :align="'left'"></note>
        <legends :names="names"></legends>
    </graph-line3d>
</div>

In the following code, the chart is prefixed with 'graph-' for each type. The widget can be added as a child node of the chart, unlike a chart, was named without a prefix.

在以下代码中,每种类型的图表都以“ graph-”为前缀。 可以将小部件添加为图表的子节点,与图表不同的是,该小部件的命名没有前缀。

The vue-graph can be combined with charts and widgets for a variety of visualizations. This is a very flexible and scalable structure.

Vue图形可以与图表和小部件结合使用,以实现各种可视化效果。 这是一个非常灵活和可扩展的结构。

var vm = new Vue({
    el: "#app",
    data: {
        names: [ "MS", "Apple", "Google" ],
        values: [
            [ 0, 15, 8, 18 ],
            [ 15, 6, 10, 5 ],
            [ 20, 20, 20, 20 ]
        ]
    }
});

实施图表清单 (Implemented chart list)

There are many charts that have not yet been migrated. We are going to continue.

许多图表尚未迁移。 我们将继续。

道具 (Props)

共同 (Common)

NameTypeRequiredWatchDefaultDescription
themeStringfalsefalsejenniferSupports a total of five themes (jennifer, dark, pastel, gradient, pattern)
stylesObjectfalsefalseundefinedOptions to customize chart theme properties (Style Tab)
colorsArray, FunctionfalsefalseundefinedOptions to change the list of colors defined by chart theme (Style Tab)
clipBooleanfalsefalsefalseOption to cut if the drawing element is out of the chart range
formatFunctionfalsetrueundefinedA callback function that allows you to customize the axis values of the chart
widthNumbertruetrueundefinedThe width of the chart
heightNumbertruetrueundefinedThe height of the chart
paddingTopNumberfalsefalse50Top padding of the chart
paddingRightNumberfalsefalse50Right padding of the chart
paddingBottomNumberfalsefalse50Bottom padding of the chart
paddingLeftNumberfalsefalse50Left padding of the chart
labelsArrayfalsetrueundefinedLabel of chart data
valuesArrayfalsetrueundefinedIt is a chart data value, and the format may be different for each chart type
名称 类型 需要 默认 描述
主题 jennifer 总共支持五个主题( 詹妮弗黑暗粉彩渐变图案 )
样式 目的 undefined 自定义图表主题属性的选项 (“ 样式”选项卡 )
颜色 数组,函数 undefined 更改图表主题定义的颜色列表的选项 (“ 样式”选项卡 )
布尔型 如果绘图元素不在图表范围内,则可以选择剪切
格式 功能 真正 undefined 允许您自定义图表的轴值的回调函数
宽度 真正 真正 undefined 图表的宽度
高度 真正 真正 undefined 图表的高度
paddingTop 50 图表的顶部填充
paddingRight 50 图表的右填充
底部填充 50 图表的底部填充
paddingLeft 50 图表的左填充
标签 数组 真正 undefined 图表数据标签
价值观 数组 真正 undefined 它是一个图表数据值,每种图表类型的格式可能不同

通用(XY轴) (Common (X-Y Axis))

NameTypeRequiredWatchDefaultDescription
axisMinNumberfalsefalse0Miniimum value for the chart axis
axisMaxNumberfalsefalse0Maximum value for the chart axis
axisStepNumberfalsefalse10Display interval of chart axis value
axisXStyleStringfalsefalsesolidLine style for chart x-axis area (solid, dotted, gradient, hidden)
axisYStyleStringfalsefalsesolidLine style for chart y-axis area (solid, dotted, gradient, hidden)
axisXPositionStringfalsefalsebottomChart x-axis position (bottom, top)
axisYPositionStringfalsefalseleftChart y-axis position (left, right)
axisReverseBooleanfalsefalsefalseReplace the x and y axis positions
axisFullModeBooleanfalsefalsefalseDraw a chart drawing element full of the axis label area.
axisIntervalNumberfalsefalse1000 * 60 * 60It is the label value display interval of the date type (Unit: ms)
axisFormatString, FunctionfalsefalseHHIt is the label value display format of the date type
名称 类型 需要 默认 描述
轴最小值 0 图表轴的最小值
axisMax 0 图表轴的最大值
axisStep 10 图表轴值的显示间隔
axisXStyle solid 图表x轴区域的线条样式( 实心点划线渐变隐藏 )
axisYStyle solid 图表y轴区域的线条样式( 实心点划线渐变隐藏 )
axisXPosition bottom 图表x轴位置( 底部顶部 )
axisYPosition left 图表y轴位置( )
axisReverse 布尔型 替换x和y轴位置
axisFullMode 布尔型 绘制一个充满轴标签区域的图表图形元素。
axisInterval 1000 * 60 * 60 它是日期类型的标签值显示间隔(单位:毫秒)
axisFormat 字符串,函数 HH 是日期类型的标签值显示格式

图表道具 (Props by charts)

图形栏 (graph-bar)
NameTypeRequiredWatchDefaultDescription
fixedSizeNumberfalsefalse0Fixed width of bar (or height)
minValueNumberfalsefalse0When the value is very small, the minimum size of the bar
barMarginNumberfalsefalse2Margins between bars and bars
barPaddingNumberfalsefalse1Inside padding inside the bar
activeIndexNumberfalsefalseundefinedThe index of the bar to activate
activeEventStringfalsefalseundefinedEvent type to activate the bar
displayStringfalsefalseundefinedOptions that display the value of the bar (max, min, all)
名称 类型 需要 默认 描述
fixedSize 0 固定杆宽度(或高度)
最小值 0 当值很小时,最小尺寸条形
barMargin 2 条和条之间的边距
barPadding 1个 栏内的内部填充
activeIndex undefined 激活栏的索引
activeEvent undefined 活动类型以激活酒吧
显示 undefined 显示条形值的选项( maxminall )
graph-bar3d (graph-bar3d)
NameTypeRequiredWatchDefaultDescription
namesArraytruefalseundefinedName of the z-axis data key
barPaddingNumberfalsefalse20Inside padding inside the bar
名称 类型 需要 默认 描述
名字 数组 真正 undefined z轴数据键的名称
barPadding 20 栏内的内部填充
图栈条 (graph-stackbar)
NameTypeRequiredWatchDefaultDescription
fixedSizeNumberfalsefalse0Fixed width of bar (or height)
barMarginNumberfalsefalse2Margins between bars and bars
barPaddingNumberfalsefalse1Inside padding inside the bar
activeIndexNumberfalsefalseundefinedThe index of the bar to activate
activeEventStringfalsefalseundefinedEvent type to activate the bar
displayStringfalsefalseundefinedOptions that display the value of the bar (max, min, all)
connectedLineBooleanfalsefalsefalseOptions that show the line connecting the bars and bars
fullModeBooleanfalsefalsefalseOption to change to full stack bar
showTextBooleanfalsefalsefalseOptions to show the percentage value in the bar
名称 类型 需要 默认 描述
fixedSize 0 固定杆宽度(或高度)
barMargin 2 条和条之间的边距
barPadding 1个 栏内的内部填充
activeIndex undefined 激活栏的索引
activeEvent undefined 活动类型以激活酒吧
显示 undefined 显示条形值的选项( maxminall )
连接线 布尔型 显示连接条形图和条形图的线的选项
fullMode 布尔型 更改为全栈条的选项
showText 布尔型 在栏中显示百分比值的选项
图线图线日期块图线时间范围 (graph-line, graph-line-dateblock, graph-line-timerange)
NameTypeRequiredWatchDefaultDescription
shapeStringfalsefalsenormalIt is the shape of the line (normal, curve, step)
activeIndexNumberfalsefalseundefinedThe index of the line to activate
activeEventStringfalsefalseundefinedEvent type to activate the line
displayStringfalsefalseundefinedOptions that display the value of the line (max, min, all)
opacityNumberfalsefalseundefinedThe transparency of the line (Value between 0 and 1)
名称 类型 需要 默认 描述
形状 normal 它是线的形状( 法线曲线台阶 )
activeIndex undefined 要激活的行的索引
activeEvent undefined 事件类型以激活线路
显示 undefined 显示行值的选项( maxminall )
不透明 undefined 线的透明度(0到1之间的值)
图line3d (graph-line3d)
NameTypeRequiredWatchDefaultDescription
namesArraytruefalseundefinedName of the z-axis data key
linePaddingNumberfalsefalse20Inside padding inside the line
名称 类型 需要 默认 描述
名字 数组 真正 undefined z轴数据键的名称
linePadding 20 行内填充
图泡沫 (graph-bubble)
NameTypeRequiredWatchDefaultDescription
minSizeNumberfalsefalse5Minimum size of bubble
maxSizeNumberfalsefalse30Maximum size of bubble
showTextBooleanfalsefalsefalseOptions to show the percentage value in the bubble
activeEventStringfalsefalseundefinedEvent type to activate the bubble
名称 类型 需要 默认 描述
最小尺寸 5 气泡的最小尺寸
maxSize 30 气泡最大尺寸
showText 布尔型 在气泡中显示百分比值的选项
activeEvent undefined 事件类型以激活气泡
图形区域 (graph-area)
NameTypeRequiredWatchDefaultDescription
shapeStringfalsefalsenormalIt is the shape of the area (normal, curve, step)
opacityNumberfalsefalseundefinedThe transparency of the area (Value between 0 and 1)
borderLineBooleanfalsefalsetrueShow lines on the border of the area
名称 类型 需要 默认 描述
形状 normal 它是区域的形状( 法线曲线台阶 )
不透明 undefined 区域的透明度(值介于0和1之间)
边缘 布尔型 真正 在区域边界上显示线条
图散点图 (graph-scatter)
NameTypeRequiredWatchDefaultDescription
shapeStringfalsefalsecircleIt is the shape of the scatter (circle, triangle, rectangle, cross)
activeEventStringfalsefalseundefinedEvent type to activate the scatter
displayStringfalsefalseundefinedOptions that display the value of the scatter (max, min, all)
opacityNumberfalsefalseundefinedThe transparency of the scatter (Value between 0 and 1)
sizeNumberfalsefalse7Size of scatter (Value between 0 and 1)
hideZeroBooleanfalsefalsefalseOption to hide scatter when the value is 0
名称 类型 需要 默认 描述
形状 circle 它是散点图的形状( 圆形三角形矩形十字形 )
activeEvent undefined 事件类型以激活散点图
显示 undefined 显示散点值的选项( maxminall )
不透明 undefined 散点图的透明度(值介于0和1之间)
尺寸 7 散点大小(值介于0和1之间)
hideZero 布尔型 当值为0时隐藏散点图的选项
图饼 (graph-pie)
NameTypeRequiredWatchDefaultDescription
shapeStringfalsefalsepieIt is the shape of the pie (pie, donut)
activeIndexNumber, ArrayfalsefalseundefinedThe index of the pie to activate
activeEventStringfalsefalseundefinedEvent type to activate the pie
showTextTypeStringfalsefalseundefinedOptions that display the value of the pie (inside, outside)
dataFormatFunctionfalsetrueundefinedPie data format function
showTotalValueBooleanfalsefalseundefinedOptions that show total value in the center when the shape is donut
strokeWidthNumberfalsefalse50When the shape is donut, set the stroke width
名称 类型 需要 默认 描述
形状 pie 它是馅饼的形状( 甜甜圈 )
activeIndex 数字,数组 undefined 激活饼图的索引
activeEvent undefined 事件类型以激活饼图
showTextType undefined 显示饼图值的选项( insideoutside )
数据格式 功能 真正 undefined Pie数据格式功能
showTotalValue 布尔型 undefined 形状为甜甜圈时在中心显示总价值的选项
strokeWidth 50 当形状为甜甜圈时,设置笔触宽度

小部件的道具 (Props by widgets)

注意 (note)

A widget that can display text in a chart.

可以在图表中显示文本的小部件。

NameTypeRequiredWatchDefaultDescription
textStringtruetrueText to display
alignStringfalsefalsecenterHorizontal alignment (center, left, right)
verticalAlignStringfalsefalsetopVertical alignment (top, bottom, middle)
dxNumberfalsefalse0x-axis position adjustment value
dyNumberfalsefalse0y-axis position adjustment value
sizeNumberfalsefalseundefinedFont size
colorStringfalsefalseundefinedFont color
名称 类型 需要 默认 描述
文本 真正 真正 显示文字
对齐 center 水平对齐( 中心 )
verticalAlign top 垂直对齐( 顶部底部中间 )
dx 0 x轴位置调整值
dy 0 y轴位置调整值
尺寸 undefined 字体大小
颜色 undefined 字体颜色
工具提示 (tooltip)

Widget showing chart element values.

显示图表元素值的小部件。

NameTypeRequiredWatchDefaultDescription
namesStringtruefalseName to map to value type
positionStringfalsefalsetopVertical alignment (top, bottom, left, right)
showAnchorBooleanfalsefalsetrueOptions to display anchor
名称 类型 需要 默认 描述
名字 真正 要映射到值类型的名称
位置 top 垂直对齐( 顶部底部左侧右侧 )
showAnchor 布尔型 真正 显示锚点的选项
传说 (legends)

Widget that represents the chart legend.

代表图表图例的小部件。

NameTypeRequiredWatchDefaultDescription
namesStringtruefalseName to map to value type
alignStringfalsefalsecenterHorizontal alignment (center, start, end)
positionStringfalsefalsebottomVertical alignment (top, bottom, left, right)
dxNumberfalsefalse0x-axis position adjustment value
dyNumberfalsefalse0y-axis position adjustment value
filterBooleanfalsefalsefalseOptions to filter elements of a specific name
colorsArrayfalsefalseundefinedFiltering element color by name
名称 类型 需要 默认 描述
名字 真正 要映射到值类型的名称
对齐 center 水平对齐( 中心开始结束 )
位置 bottom 垂直对齐( 顶部底部左侧右侧 )
dx 0 x轴位置调整值
dy 0 y轴位置调整值
过滤 布尔型 用于过滤特定名称的元素的选项
颜色 数组 undefined 按名称过滤元素颜色
指导方针 (guideline)

Widget to help you see x-y axis values easily.

帮助您轻松查看xy轴值的小部件。

NameTypeRequiredWatchDefaultDescription
tooltipXBooleanfalsefalsefalseGuidelines for displaying x-axis values
tooltipYBooleanfalsefalsetrueGuidelines for displaying y-axis values
名称 类型 需要 默认 描述
工具提示X 布尔型 显示x轴值的准则
工具提示 布尔型 真正 显示y轴值的准则

大事记 (Events)

There are three types of events for the drawing object, outside and inside the axis area.

轴区域的外部和内部有三种类型的图形对象事件。

<div id="app">
    <graph-bar
            :width="600"
            :height="400"
            :axis-min="0"
            :axis-max="50"
            :labels="[ '1Q', '2Q', '3Q', '4Q' ]"
            :values="values"
            :active-event="'click'"
            @click="onClickBar"
            @outside#click="onClickOutside"
            @inside#click="onClickInside">
        <note :text="'Bar Chart (+Event)'"></note>
    </graph-bar>
</div>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        values: [
            [ 10, 5, 5, 5 ],
            [ 40, 10, 10, 10 ],
            [ 30, 30, 30, 30 ]
        ]
    },
    methods: {
        onClickBar: function() {
            console.log(arguments);
            alert("onClickBar");
        },
        onClickOutside: function() {
            console.log(arguments);
            alert("onClickOutside");
        },
        onClickInside: function() {
            console.log(arguments);
            alert("onClickInside");
        }
    }
});
</script>

Common events are shown in the table below.

常见事件如下表所示。

Outside axisInside axisDrawing objectDescription
outside#clickinside#clickclick
outside#dblclickinside#dblclickdblclick
outside#rclickinside#rclickrclickcontextmenu
outside#mouseoverinside#mouseovermouseover
outside#mouseoutinside#mouseoutmouseout
outside#mousemoveinside#mousemovemousemove
outside#mousedowninside#mousedownmousedown
outside#mouseupinside#mouseupmouseup
外轴 内轴 绘图对象 描述
外部#click 内部#点击 点击
outside#dblclick 内部#dblclick dblclick
outside#rclick 内部#rclick 单击 contextmenu
外部#鼠标悬停 内部#鼠标悬停 鼠标移到
outside#mouseout inside#mouseout 鼠标移出
outside#mousemove 内部#mousemove 鼠标移动
outside#mousedown 内部#mousedown 按下鼠标
outside#mouseup 内部#mouseup 鼠标向上

翻译自: https://vuejsexamples.com/vue-components-based-on-the-jui-chart-available-in-vue-js/

vue 图表组件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值