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)
| Name | Type | Required | Watch | Default | Description |
|---|
| theme | String | false | false | jennifer | Supports a total of five themes (jennifer, dark, pastel, gradient, pattern) |
| styles | Object | false | false | undefined | Options to customize chart theme properties (Style Tab) |
| colors | Array, Function | false | false | undefined | Options to change the list of colors defined by chart theme (Style Tab) |
| clip | Boolean | false | false | false | Option to cut if the drawing element is out of the chart range |
| format | Function | false | true | undefined | A callback function that allows you to customize the axis values of the chart |
| width | Number | true | true | undefined | The width of the chart |
| height | Number | true | true | undefined | The height of the chart |
| paddingTop | Number | false | false | 50 | Top padding of the chart |
| paddingRight | Number | false | false | 50 | Right padding of the chart |
| paddingBottom | Number | false | false | 50 | Bottom padding of the chart |
| paddingLeft | Number | false | false | 50 | Left padding of the chart |
| labels | Array | false | true | undefined | Label of chart data |
| values | Array | false | true | undefined | It 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))
| Name | Type | Required | Watch | Default | Description |
|---|
| axisMin | Number | false | false | 0 | Miniimum value for the chart axis |
| axisMax | Number | false | false | 0 | Maximum value for the chart axis |
| axisStep | Number | false | false | 10 | Display interval of chart axis value |
| axisXStyle | String | false | false | solid | Line style for chart x-axis area (solid, dotted, gradient, hidden) |
| axisYStyle | String | false | false | solid | Line style for chart y-axis area (solid, dotted, gradient, hidden) |
| axisXPosition | String | false | false | bottom | Chart x-axis position (bottom, top) |
| axisYPosition | String | false | false | left | Chart y-axis position (left, right) |
| axisReverse | Boolean | false | false | false | Replace the x and y axis positions |
| axisFullMode | Boolean | false | false | false | Draw a chart drawing element full of the axis label area. |
| axisInterval | Number | false | false | 1000 * 60 * 60 | It is the label value display interval of the date type (Unit: ms) |
| axisFormat | String, Function | false | false | HH | It 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)
| Name | Type | Required | Watch | Default | Description |
|---|
| fixedSize | Number | false | false | 0 | Fixed width of bar (or height) |
| minValue | Number | false | false | 0 | When the value is very small, the minimum size of the bar |
| barMargin | Number | false | false | 2 | Margins between bars and bars |
| barPadding | Number | false | false | 1 | Inside padding inside the bar |
| activeIndex | Number | false | false | undefined | The index of the bar to activate |
| activeEvent | String | false | false | undefined | Event type to activate the bar |
| display | String | false | false | undefined | Options that display the value of the bar (max, min, all) |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| fixedSize | 数 | 假 | 假 | 0 | 固定杆宽度(或高度) |
| 最小值 | 数 | 假 | 假 | 0 | 当值很小时,最小尺寸条形 |
| barMargin | 数 | 假 | 假 | 2 | 条和条之间的边距 |
| barPadding | 数 | 假 | 假 | 1个 | 栏内的内部填充 |
| activeIndex | 数 | 假 | 假 | undefined | 激活栏的索引 |
| activeEvent | 串 | 假 | 假 | undefined | 活动类型以激活酒吧 |
| 显示 | 串 | 假 | 假 | undefined | 显示条形值的选项( max , min , all ) |
| Name | Type | Required | Watch | Default | Description |
|---|
| names | Array | true | false | undefined | Name of the z-axis data key |
| barPadding | Number | false | false | 20 | Inside padding inside the bar |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| 名字 | 数组 | 真正 | 假 | undefined | z轴数据键的名称 |
| barPadding | 数 | 假 | 假 | 20 | 栏内的内部填充 |
| Name | Type | Required | Watch | Default | Description |
|---|
| fixedSize | Number | false | false | 0 | Fixed width of bar (or height) |
| barMargin | Number | false | false | 2 | Margins between bars and bars |
| barPadding | Number | false | false | 1 | Inside padding inside the bar |
| activeIndex | Number | false | false | undefined | The index of the bar to activate |
| activeEvent | String | false | false | undefined | Event type to activate the bar |
| display | String | false | false | undefined | Options that display the value of the bar (max, min, all) |
| connectedLine | Boolean | false | false | false | Options that show the line connecting the bars and bars |
| fullMode | Boolean | false | false | false | Option to change to full stack bar |
| showText | Boolean | false | false | false | Options to show the percentage value in the bar |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| fixedSize | 数 | 假 | 假 | 0 | 固定杆宽度(或高度) |
| barMargin | 数 | 假 | 假 | 2 | 条和条之间的边距 |
| barPadding | 数 | 假 | 假 | 1个 | 栏内的内部填充 |
| activeIndex | 数 | 假 | 假 | undefined | 激活栏的索引 |
| activeEvent | 串 | 假 | 假 | undefined | 活动类型以激活酒吧 |
| 显示 | 串 | 假 | 假 | undefined | 显示条形值的选项( max , min , all ) |
| 连接线 | 布尔型 | 假 | 假 | 假 | 显示连接条形图和条形图的线的选项 |
| fullMode | 布尔型 | 假 | 假 | 假 | 更改为全栈条的选项 |
| showText | 布尔型 | 假 | 假 | 假 | 在栏中显示百分比值的选项 |
| Name | Type | Required | Watch | Default | Description |
|---|
| shape | String | false | false | normal | It is the shape of the line (normal, curve, step) |
| activeIndex | Number | false | false | undefined | The index of the line to activate |
| activeEvent | String | false | false | undefined | Event type to activate the line |
| display | String | false | false | undefined | Options that display the value of the line (max, min, all) |
| opacity | Number | false | false | undefined | The transparency of the line (Value between 0 and 1) |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| 形状 | 串 | 假 | 假 | normal | 它是线的形状( 法线 , 曲线 , 台阶 ) |
| activeIndex | 数 | 假 | 假 | undefined | 要激活的行的索引 |
| activeEvent | 串 | 假 | 假 | undefined | 事件类型以激活线路 |
| 显示 | 串 | 假 | 假 | undefined | 显示行值的选项( max , min , all ) |
| 不透明 | 数 | 假 | 假 | undefined | 线的透明度(0到1之间的值) |
| Name | Type | Required | Watch | Default | Description |
|---|
| names | Array | true | false | undefined | Name of the z-axis data key |
| linePadding | Number | false | false | 20 | Inside padding inside the line |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| 名字 | 数组 | 真正 | 假 | undefined | z轴数据键的名称 |
| linePadding | 数 | 假 | 假 | 20 | 行内填充 |
| Name | Type | Required | Watch | Default | Description |
|---|
| minSize | Number | false | false | 5 | Minimum size of bubble |
| maxSize | Number | false | false | 30 | Maximum size of bubble |
| showText | Boolean | false | false | false | Options to show the percentage value in the bubble |
| activeEvent | String | false | false | undefined | Event type to activate the bubble |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| 最小尺寸 | 数 | 假 | 假 | 5 | 气泡的最小尺寸 |
| maxSize | 数 | 假 | 假 | 30 | 气泡最大尺寸 |
| showText | 布尔型 | 假 | 假 | 假 | 在气泡中显示百分比值的选项 |
| activeEvent | 串 | 假 | 假 | undefined | 事件类型以激活气泡 |
| Name | Type | Required | Watch | Default | Description |
|---|
| shape | String | false | false | normal | It is the shape of the area (normal, curve, step) |
| opacity | Number | false | false | undefined | The transparency of the area (Value between 0 and 1) |
| borderLine | Boolean | false | false | true | Show lines on the border of the area |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| 形状 | 串 | 假 | 假 | normal | 它是区域的形状( 法线 , 曲线 , 台阶 ) |
| 不透明 | 数 | 假 | 假 | undefined | 区域的透明度(值介于0和1之间) |
| 边缘 | 布尔型 | 假 | 假 | 真正 | 在区域边界上显示线条 |
| Name | Type | Required | Watch | Default | Description |
|---|
| shape | String | false | false | circle | It is the shape of the scatter (circle, triangle, rectangle, cross) |
| activeEvent | String | false | false | undefined | Event type to activate the scatter |
| display | String | false | false | undefined | Options that display the value of the scatter (max, min, all) |
| opacity | Number | false | false | undefined | The transparency of the scatter (Value between 0 and 1) |
| size | Number | false | false | 7 | Size of scatter (Value between 0 and 1) |
| hideZero | Boolean | false | false | false | Option to hide scatter when the value is 0 |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| 形状 | 串 | 假 | 假 | circle | 它是散点图的形状( 圆形 , 三角形 , 矩形 , 十字形 ) |
| activeEvent | 串 | 假 | 假 | undefined | 事件类型以激活散点图 |
| 显示 | 串 | 假 | 假 | undefined | 显示散点值的选项( max , min , all ) |
| 不透明 | 数 | 假 | 假 | undefined | 散点图的透明度(值介于0和1之间) |
| 尺寸 | 数 | 假 | 假 | 7 | 散点大小(值介于0和1之间) |
| hideZero | 布尔型 | 假 | 假 | 假 | 当值为0时隐藏散点图的选项 |
| Name | Type | Required | Watch | Default | Description |
|---|
| shape | String | false | false | pie | It is the shape of the pie (pie, donut) |
| activeIndex | Number, Array | false | false | undefined | The index of the pie to activate |
| activeEvent | String | false | false | undefined | Event type to activate the pie |
| showTextType | String | false | false | undefined | Options that display the value of the pie (inside, outside) |
| dataFormat | Function | false | true | undefined | Pie data format function |
| showTotalValue | Boolean | false | false | undefined | Options that show total value in the center when the shape is donut |
| strokeWidth | Number | false | false | 50 | When the shape is donut, set the stroke width |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| 形状 | 串 | 假 | 假 | pie | 它是馅饼的形状( 派 , 甜甜圈 ) |
| activeIndex | 数字,数组 | 假 | 假 | undefined | 激活饼图的索引 |
| activeEvent | 串 | 假 | 假 | undefined | 事件类型以激活饼图 |
| showTextType | 串 | 假 | 假 | undefined | 显示饼图值的选项( inside , outside ) |
| 数据格式 | 功能 | 假 | 真正 | undefined | Pie数据格式功能 |
| showTotalValue | 布尔型 | 假 | 假 | undefined | 形状为甜甜圈时在中心显示总价值的选项 |
| strokeWidth | 数 | 假 | 假 | 50 | 当形状为甜甜圈时,设置笔触宽度 |
注意 (note)
A widget that can display text in a chart.
可以在图表中显示文本的小部件。
| Name | Type | Required | Watch | Default | Description |
|---|
| text | String | true | true | | Text to display |
| align | String | false | false | center | Horizontal alignment (center, left, right) |
| verticalAlign | String | false | false | top | Vertical alignment (top, bottom, middle) |
| dx | Number | false | false | 0 | x-axis position adjustment value |
| dy | Number | false | false | 0 | y-axis position adjustment value |
| size | Number | false | false | undefined | Font size |
| color | String | false | false | undefined | Font color |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| 文本 | 串 | 真正 | 真正 | | 显示文字 |
| 对齐 | 串 | 假 | 假 | center | 水平对齐( 中心 , 左 , 右 ) |
| verticalAlign | 串 | 假 | 假 | top | 垂直对齐( 顶部 , 底部 , 中间 ) |
| dx | 数 | 假 | 假 | 0 | x轴位置调整值 |
| dy | 数 | 假 | 假 | 0 | y轴位置调整值 |
| 尺寸 | 数 | 假 | 假 | undefined | 字体大小 |
| 颜色 | 串 | 假 | 假 | undefined | 字体颜色 |
Widget showing chart element values.
显示图表元素值的小部件。
| Name | Type | Required | Watch | Default | Description |
|---|
| names | String | true | false | | Name to map to value type |
| position | String | false | false | top | Vertical alignment (top, bottom, left, right) |
| showAnchor | Boolean | false | false | true | Options to display anchor |
| 名称 | 类型 | 需要 | 看 | 默认 | 描述 |
|---|
| 名字 | 串 | 真正 | 假 | | 要映射到值类型的名称 |
| 位置 | 串 | 假 | 假 | top | 垂直对齐( 顶部 , 底部 , 左侧 , 右侧 ) |
| showAnchor | 布尔型 | 假 | 假 | 真正 | 显示锚点的选项 |
传说 (legends)
Widget that represents the chart legend.
代表图表图例的小部件。
| Name | Type | Required | Watch | Default | Description |
|---|
| names | String | true | false | | Name to map to value type |
| align | String | false | false | center | Horizontal alignment (center, start, end) |
| position | String | false | false | bottom | Vertical alignment (top, bottom, left, right) |
| dx | Number | false | false | 0 | x-axis position adjustment value |
| dy | Number | false | false | 0 | y-axis position adjustment value |
| filter | Boolean | false | false | false | Options to filter elements of a specific name |
| colors | Array | false | false | undefined | Filtering 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轴值的小部件。
| Name | Type | Required | Watch | Default | Description |
|---|
| tooltipX | Boolean | false | false | false | Guidelines for displaying x-axis values |
| tooltipY | Boolean | false | false | true | Guidelines 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 axis | Inside axis | Drawing object | Description |
|---|
| outside#click | inside#click | click | |
| outside#dblclick | inside#dblclick | dblclick | |
| outside#rclick | inside#rclick | rclick | contextmenu |
| outside#mouseover | inside#mouseover | mouseover | |
| outside#mouseout | inside#mouseout | mouseout | |
| outside#mousemove | inside#mousemove | mousemove | |
| outside#mousedown | inside#mousedown | mousedown | |
| outside#mouseup | inside#mouseup | mouseup | |
| 外轴 | 内轴 | 绘图对象 | 描述 |
|---|
| 外部#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 图表组件