svg使用外部字体_使用svg构建简单的图表，而无需外部dep

svg使用外部字体

vue-svg图表 (vue-svg-charts)

Lightweight Vue components for drawing pure svg charts without external dependencies.

轻量级Vue组件，用于绘制无外部依赖的纯svg图表。

View Demo 查看演示 View Github 查看Github

特征 (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使用外部字体