Vue：数据未绑定到道具，因此未使用 vue-D3-charts 渲染 BarChart

Question

我想渲染一个简单的条形图。

我正在学习如何通过在我的 vue.js 应用程序的组件中使用 vue-d3-charts 来使用 D3 模块进行数据可视化。

我创建了一个条形图组件并将其导入我的应用程序，但它不会呈现实际的条形图。当我使用开发工具检查条形图时，我可以看到条形图的相关 div 和 svg，但图表不会呈现到页面上。

这让我相信我的数据对象没有绑定到我的 props 以允许来自 vue-D3-charts 模块的 D3BarChart 进行渲染。

模块文档可以在这里找到 -> https://saigesp.github.io/vue-d3-charts/#/

我的BarChart 组件使用了config 和datum 的props：

<template>
  <div class="bar-chart">
    <D3BarChart :config="chart_config" :datum="chart_data"></D3BarChart>
  </div>
</template>
<script>
import { D3BarChart } from "vue-d3-charts";

export default {
  name: "BarChart",
  components: { D3BarChart },
  props: ["config", "datum"],
  data() {
    return {
      chart_config: {
        key: "name",
        value: "total",
        color: { current: "#41B882" },
        transition: { ease: "easeBounceOut", duration: 1000 },
      },
      chart_data: [
        {
          iphone: 123,
          android: 208,
          when: "2019-08-01",
        },
        {
          iphone: 165,
          android: 201,
          when: "2019-09-01",
        },
      ],
    };
  },

};
</script>

我的 app.js：

<template>
  <main id="app">
    <bar-chart />

    <section class="products">
      <!-- A prop called product which takes the object product creasted in the for loop - in turn creating a prop that contains one product item from the products object-->
      <product-card
        v-for="product in products"
        :key="product.color"
        :productDataProp="product"
      />
    </section>
  </main>
</template>

<script>
import ProductCard from "./components/ProductCard.vue";
// import BasicLineChart from "./components/BasicLineChart.vue";

import BarChart from "./components/BarChart.vue";

export default {
  name: "App",
  components: {
    ProductCard,
    BarChart,
  },
  data() {
    return {
      products: [
        {
          title: "Nike Air Max",
          color: "green",
          bgtext: "NIKE",
          src: require("./assets/green-shoe.png"),
        },
        {
          title: "Nike flex",
          color: "blue",
          bgtext: "AIR",
          src: require("./assets/blue-shoe.png"),
        },
        {
          title: "Nike Roche Runs",
          color: "pink",
          bgtext: "MAX",
          src: require("./assets/pink-shoe.png"),
        },
      ],
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "montseratt", sans-serif;
}
main {
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.products {
  display: flex;
  max-width: 1280px;
  padding: 25;
  margin: 0 auto;
}
</style>

Answer 1

我在 BarChart.vue 中做了一些小改动，它正在工作。你可以试试下面：

我发现并修复的几个问题是：

1. div "bar-chart" 宽度太小，无法生成图表。
2. 在“chart_config”键和值不正确的地方。到您的“chart_data”。

条形图.vue

<template>
  <div class="bar-chart" style="border:1px solid black; width:90%">
    <D3BarChart :config="chart_config" :datum="chart_data"></D3BarChart>
  </div>
</template>
<script>
import { D3BarChart } from 'vue-d3-charts';

export default {
  components: {
    D3BarChart,
  },
  data() {
    return {

      chart_data: [
        {
          iphone: 123,
          android: 208,
          when: "2019-08-01",
        },
        {
          iphone: 165,
          android: 201,
          when: "2019-09-01",
        }
      ],
      chart_config: {
        key: 'when',
        values: ['iphone','android'],
        color: { 
            default: '#222f3e',
            current: '#41B882'
        },
        transition: { ease: "easeBounceOut", duration: 1000 },
      }
    }
  }
}
</script>