vue 图表组件_使用vue组件构建的不同d2b.js图表

最新推荐文章于 2024-06-08 21:57:58 发布

cuk5340

最新推荐文章于 2024-06-08 21:57:58 发布

阅读量163

点赞数

文章标签： vue react 数据可视化 python javascript ViewUI

原文链接：https://vuejsexamples.com/the-different-d2b-js-charts-built-with-vue-components/

版权

vue 图表组件

vue-d2b (vue-d2b)

Vue components for d2b charts.

d2b图表的Vue组件。

依存关系 (Dependencies)

If you are installing with npm the necessary javascript dependencies d3 and d2b will automatically be included. Otherwise, import d3 and d2b manually before vue-d2b.

如果使用npm安装，则必需的javascript依赖项d3和d2b将自动包括在内。否则，请在vue-d2b之前手动导入d3和d2b。

Additionally, many charts in d2b make use of certain font-awesome icons so import those if necessary.

此外，d2b中的许多图表都使用某些超棒的字体图标，因此在必要时可以导入它们。

View demo 查看演示 Download Source 下载源

安装和基本用法 (Install & Basic Usage)

Add vue-d2b with npm or yarn.

用npm或yarn添加vue-d2b。

npm install vue-d2b --save

要么

yarn add vue-d2b

vue-d2b adds vue convenience components for all of the d2b chart generators. Currently supported chart components:

vue-d2b为所有d2b图表生成器添加了vue便利组件。当前支持的图表组件：

ChartAxis: An axis chart generator, with options for various types of cartesian e.g. line, bar, area.
ChartAxis ：轴图生成器，具有各种笛卡尔类型的选项，例如线，条，面积。
ChartPie: A pie or donut chart.
ChartPie ：饼图或甜甜圈图。
ChartSankey: A sankey flow diagram.
ChartSankey ：sankey流程图。
ChartSunburst: A hierarchical sunburst chart.
ChartSunburst ：分层的森伯斯特图表。

<template>
  <div class = 'chart'>
    <!-- import font awesome for legend icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!--
      Both the :data and :config properties are deeply reactive so any changes
      to these will cause the chart to update.
    -->
    <chart-pie :data = 'chartData' :config = 'chartConfig'></chart-pie>
  </div>
</template>

<script>
  import { ChartPie } from 'vue-d2b'

  export default {
    data () {
      return {
        // Describe the pie-chart data for more information on this checkout
        // the d2bjs.org docs.
        chartData: [
          {label: 'arc 1', value: 23},
          {label: 'arc 2', value: 31},
          {label: 'arc 3', value: 80},
          {label: 'arc 4', value: 8}
        ],

        // The chart config property is a callback function that is executed
        // any time the chart undergoes an update. The function receives the
        // d2b chart generator as an argument and can be configured as described
        // as described by the d2bjs.org docs.
        chartConfig (chart) {
          chart.donutRatio(0.5)
        }
      }
    },

    components: {
      ChartPie
    }
  }
</script>

<style scoped>
  /*
    The chart dimensions is bound by the outer container in this case '.chart'.
  */
  .chart{
    height: 500px;
  }
</style>

The other chart types are rendered in the same way, except they use their own respective component. For example, a sankey chart:

其他图表类型以相同的方式呈现，只是它们使用各自的组件。例如，sankey图表：

<template>
  <div class = 'chart'>
    <chart-sankey :data = 'chartData' :config = 'chartConfig'></chart-sankey>
  </div>
</template>

<script>
  import { ChartSankey } from 'vue-d2b'

  export default {
    data () {
      return {
        // The chart data varies from chart to chart. To see what type of data
        // to provide each chart type head over to the d2bjs.org docs.
        chartData: {
          nodes: [
            {name: 'Node A'},
            {name: 'Node B'},
            {name: 'Node C'},
            {name: 'Node D'},
            {name: 'Node E'}
          ],
          links: [
            {source: 'Node A', target: 'Node E', value: 2},
            {source: 'Node A', target: 'Node C', value: 2},
            {source: 'Node B', target: 'Node C', value: 2},
            {source: 'Node B', target: 'Node D', value: 2},
            {source: 'Node C', target: 'Node D', value: 2},
            {source: 'Node C', target: 'Node E', value: 2},
            {source: 'Node D', target: 'Node E', value: 4}
          ]
        },

        // There are many configuration options for each chart type, checkout
        // the d2bjs.org docs for more information.
        chartConfig (chart) {
          chart
            // returns the d2b svg sankey generator
            .sankey()
            // returns the d3 sankey generator
            .sankey()
            // now configure the d3 sankey generator through method chaining
            .nodePadding(50)
        }
      }
    },

    components: {
      chartSankey
    }
  }
</script>

<style scoped>
  .chart{
    height: 500px;
  }
</style>

发电机组件 (Generator Component)

There is also a one size fits all Generator component. This can be used in place of any of the chart components and it can also be used for many d2b utility generators. For example, the d2b legend generator:

还有一种尺寸适合所有Generator组件。它可以代替任何图表组件使用，也可以用于许多d2b实用程序生成器。例如，d2b图例生成器：

<template>
  <div class = 'legend'>
    <!-- import font awesome for legend icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <generator :generator = 'legendGenerator' :data = 'legendData' :config = 'legendConfig'></generator>
  </div>
</template>

<script>
  import { legend } from 'd2b'
  import { Generator } from 'vue-d2b'

  export default {
    data () {
      return {
        legendGenerator: legend(),

        legendData: [
          { html: 'Lemon' },
          { html: 'Lime' },
          { html: 'Grapefruit' },
          { html: 'Orange' }
        ],

        legendConfig (legend) {
          legend
            .clickable(true)
            .dblclickable(true)
        }
      }
    },

    components: {
      Generator
    }
  }
</script>

注意事项和陷阱 (Caveats and Gotchas)

Passing a computed property to the config prop. You must be sure to collect your dependencies outside of the returned callback function in order to make the computed property reactive.

将计算的属性传递给config属性。您必须确保在返回的回调函数之外收集依赖项，以使计算的属性具有React性。

<template>
  <chart-pie :data = 'chartData' :config = 'chartConfig'></chart-pie>
</template>

<script>
  export default {
    data () {
      return {
        ratio: 0.5,
        chartData: { /* ... */ }
      }
    },

    computed: {
      chartConfig () {
        // Let's say the configured donutRatio is dependent on the data's ratio
        // attribute. Therefore we must collect this dependency outside of the
        // callback function in order to make the chartConfig computed property
        // react to the change
        this.ratio

        return chart => {
          chart.donutRatio(this.ratio)
        }
      }
    }
  }
</script>

构建设置 (Build Setup)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build demo (used to prepare for gitlab pages)
npm run build:demo

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test