趋势图 (vue-trend-chart)

Simple trend charts for Vue.js.

Vue.js的简单趋势图。

：cd：安装 (:cd: Installation)

npm i vue-trend-chart

：火箭：用法 (:rocket: Usage)

import Vue from "vue";
import TrendChart from "vue-trend-chart";Vue.use(TrendChart);

Example:

例：

<TrendChart:datasets="[{data: [10, 50, 20, 100, 40, 60, 80],smooth: true,fill: true}]":grid="{verticalLines: true,horizontalLines: true}":labels="{xLabels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],yLabels: 5}":min="0">
</TrendChart>

：wrench：道具 (:wrench: Props)

datasets (datasets)

Required Type: Array

必填类型： 数组

Array of objects with properties for each dataset.

具有每个数据集属性的对象数组。

grid (grid)

Type: Object

类型： 对象

Grid properties

网格属性

labels (labels)

Type: Object

类型： 对象

Labels properties

标签属性

min (min)

Type: Number Default: min value from datasets

类型： 数字默认值：数据集中的最小值

max (max)

Type: Number Default: max value from datasets

类型： 数字默认值：数据集中的最大值

padding (padding)

Type: String Default: "5"

类型： 字符串默认值：“ 5”

If you set a large stroke-width on your lines, you may notice that it gets "cropped" towards the edges. It's similar to "padding" CSS property but without specifying units.

如果在行上设置较大的笔划宽度 ，则可能会注意到它朝着边缘“被裁剪”。 它类似于“ padding” CSS属性，但未指定单位。

Examples: "5" apply to all four sides "5 10" vertical | horizontal "5 15 10" top | horizontal | bottom "5 10 15 20" top | right | bottom | left

示例： "5"应用于所有四个侧面"5 10"垂直| 卧式"5 15 10"顶部| 卧式| 底部"5 10 15 20"顶部| 对| 底部| 剩下

interactive (interactive)

Type: Boolean Default: false

类型： 布尔值默认值： false

Allows to set onmousemove interaction. Set to true to enable.

允许设置onmousemove互动。 设置为true以启用。

：zap：活动 (:zap: Events)

mouse-move (mouse-move)

Callback function for onmouseover interaction.
Receives an object {index: Number, data: Array} parameter based on current active line.
This function has no effect if interactive isn't set to true.

用于onmouseover交互的回调函数。
根据当前活动行接收对象 {index: Number, data: Array}参数。
如果没有将interactive设置为true则此功能无效。

：chart_with_upwards_trend：数据集道具 (:chart_with_upwards_trend: Dataset Props)

Chart line (curve) properties

图表线(曲线)属性

data (data)

Type: Number|Object

类型： 数字|对象

Example: [70, 100, 400, 180, 100] or [{ value: 70 }, { value: 100 }, { value: 400 }, { value: 180 }, { value: 100 }]
For object type you can also add other properties to use them in interactive mode.

例如： [70, 100, 400, 180, 100]或[{ value: 70 }, { value: 100 }, { value: 400 }, { value: 180 }, { value: 100 }]
对于对象类型，您还可以添加其他属性以在interactive模式下使用它们。

className (className)

Type: String

类型： 字符串

Allows to append custom class to chart line for future styling.

允许将自定义类添加到图表线以用于将来的样式。

smooth (smooth)

Type: Boolean Default: false

类型： 布尔值默认值： false

Allows the peaks to be 'rounded' out.

允许峰被“四舍五入”。

stroke (stroke)

Type: Boolean Default: true

类型： 布尔值默认值： true

If false, the line is not drawn for this dataset.

如果为false ，则不会为此数据集绘制线。

fill (fill)

Type: Boolean Default: false

类型： 布尔值默认值： false

Allows to fill the area under the line. Set to true to enable.

允许填充线下的区域。 设置为true以启用。

showPoints (showPoints)

Type: Boolean Default: false

类型： 布尔值默认值： false

Allows to show points. Set to true to enable.

允许显示点。 设置为true以启用。

：hash：网格道具 (:hash: Grid Props)

verticalLines (verticalLines)

Type: Boolean Default: false

类型： 布尔值默认值：false

Allows to show vertical gridlines. Set to true to enable.

允许显示垂直网格线。 设置为true以启用。

verticalLinesNumber (verticalLinesNumber)

Type: Number Default: number of xLabels

类型： 数字默认值： xLabels数量

Allows to set custom number of vertical gridlines.
This prop has no effect if verticalLines isn't set to true.

允许设置垂直网格线的自定义数量。
如果verticalLines未设置为true则此道具无效。

horizontalLines (horizontalLines)

Type: Boolean Default: false

类型： 布尔值默认值：false

Allows to show horizontal gridlines. Set to true to enable.

允许显示水平网格线。 设置为true以启用。

horizontalLinesNumber (horizontalLinesNumber)

Type: Number Default: number of yLabels

类型： 数字默认值： yLabels数量

Allows to set custom number of horizontal gridlines.
This prop has no effect if horizontalLines isn't set to true.

允许设置水平网格线的自定义数量。
如果horizontalLines未设置为true则此道具无效。

：abc：标签道具 (:abc: Labels Props)

xLabels (xLabels)

Type: Array

类型： 数组

X axis labels.
Example: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

X轴标签。
例如： ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

yLabels (yLabels)

Type: Number

类型： 数字

Number of Y axis labels. Labels text is based on data values.

Y轴标签数。 标签文本基于数据值。

yLabelsTextFormatter (yLabelsTextFormatter)

Type: Function

类型： 功能

Allows to format Y axis labels text.
Example: val => "$" + Math.round(val * 100) / 100.
This function has no effect if yLabels prop has no value.

允许格式化Y轴标签文本。
示例： val => "$" + Math.round(val * 100) / 100 。
如果yLabels没有值，则此功能无效。

：art：样式 (:art: Styling)

Just use CSS to style your charts.

只需使用CSS设置图表样式即可。

Here is an example of a tree structure with available class names:

这是具有可用类名的树结构的示例：

<svg class="vtc"><g class="grid"><g class="vertical"><line class="line"></line>...</g><g class="horizontal"><line class="line"></line>...</g></g><g class="labels"><g class="x-labels"><g class="label"><text></text></g>...</g><g class="y-labels"><g class="label"><text></text></g>...</g></g><g class="curve"><path class="fill"></path><path class="stroke"></path><g class="points"><circle class="point"></circle>...</g></g>...<line class="active-line"></line>
</svg>

：hammer：发展 (:hammer: Development)

npm install
npm run dev

翻译自: https://vuejsexamples.com/simple-trend-charts-for-vue-js/