svg使用外部字体
vue-svg图表 (vue-svg-charts)
Lightweight Vue components for drawing pure svg charts without external dependencies.
轻量级Vue组件,用于绘制无外部依赖的纯svg图表。
特征 (Features)
Pure SVG. Vue is only used for calculations.
纯SVG。 Vue仅用于计算。
No external dependencies
没有外部依赖
安装 (Installation)
1.通过yarn
或npm
安装 (1. Install via yarn
or npm
)
yarn add vue-svg-charts
OR
要么
npm install vue-svg-charts
2.导入并使用vue-svg-charts
(2. Import and use vue-svg-charts
)
ES6
ES6
import BarGraph from "vue-svg-charts/components/bar";
Vue.use(BarGraph);
用法 (Usage)
基本用法 (Basic usage)
With sane defaults in place, basic usage is as simple as passing a points
array of values bar-graph
component.
有了合理的默认设置,基本用法就像传递值bar-graph
组件的points
组一样简单。
<template>
<bar-graph :points="points"/>
</template>
<script>
export default {
data() {
return {
points: [42, 8, 15, 16, 23, 42, 4, 8, 15]
};
}
};
</script>
与所有可用道具一起使用 (Usage with all the available props)
<template>
<bar-graph
title="Test Bar Graph"
animDuration="1s"
:showValues="true"
:easeIn="true"
:points="points"
:labels="labels"
:width="1024"
:height="320"
/>
</template>
<script>
export default {
data() {
return {
points: [42, 8, 15, 16, 23, 42, 4, 8, 15],
labels: [
"Label 1",
"Label 2",
"Label 3",
"Label 4",
"Label 5",
"Label 6",
"Label 7",
"Label 8",
"Label 9"
]
};
}
};
</script>
道具 (Props)
width
(width
)
type:
Number
类型:
Number
default:
680
默认值:
680
Width of the graph. Can be any positive value.
图形的宽度。 可以是任何正值。
height
(height
)
type:
Number
类型:
Number
default:
320
默认值:
320
Height of the graph. Can be any positive value.
图形的高度。 可以是任何正值。
title
(title
)
type:
String
类型:
String
default: ``
默认值:``
Title to set for the graph (is display on hover).
要为图表设置的标题(悬停时显示)。
points
(points
)
type:
Array
类型:
Array
default:
[]
默认值:
[]
Values to display.
要显示的值。
labels
(labels
)
type:
Array
类型:
Array
default:
[]
默认值:
[]
Lables related to values array.
与值数组有关的标签。
showValues
(showValues
)
type:
Boolean
类型:
Boolean
default:
false
默认值:
false
Specifies whether the graph should display values on top of bar.
指定图形是否应在条形顶部显示值。
animated
(animated
)
type:
Boolean
类型:
Boolean
default:
true
默认值:
true
Specifies whether the graph should be animated by transition.
指定是否应通过过渡为图形设置动画。
animDuration
(animDuration
)
type:
String
类型:
String
default:
1s
默认值:
1s
SVG animation duration.
SVG动画持续时间。
翻译自: https://vuejsexamples.com/simple-charts-build-with-svg-without-external-deps/
svg使用外部字体