Chartist + VueJs + Webpack的样式问题

Question

我正在按照提供的文档here获取简单的折线图。所有依赖包都使用yarn添加，并且附加的css / scss是否可能无法正确引导？

问题

渲染的图表全是黑色和丑陋的，如截图所示可能是因为缺少css，不确定。

使用的套餐

 "dependencies": {
    "chartist": "^0.11.0",
     "vue": "2.5.0",
    "vue-typed": "git+https://github.com/icfr/vue-typed.git#update_vue",
    "vuetify": "^0.17.6"
},
"devDependencies": {
    "@types/chartist": "^0.9.38"
}

Vue Js模板 - linechart.vue

<template>
  <v-content>
     <v-container grid-list-xl>
            <h2>Line chart using chartist.js</h2>
            <div class ="ct-chart"></div>
     </v-container>
   </v-content>
</template>

TS代码

import Vue from "vue";
import { Component, Prop } from "vue-typed";
import * as Chartist from "chartist";
const template = require("./linechart.vue");

export default class ChartistLineChart extends Vue {
mounted() {
    let chart = this.$el.getElementsByClassName("ct-chart")[0];
    let data: Chartist.IChartistData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        series: [[740, 790, 720, 900, 890, 880, 840],
                 [140, 390, 100, 900, 190, 180, 400]
                ]
    };
    let options: Chartist.ILineChartOptions = {
        fullWidth: true,
        chartPadding: {
            right: 40
          }
    };
    let lineChart = new Chartist.Line(chart, data, options);
}

我可能错过了什么？谢谢！

Answer 1

您缺少包含Chartist的样式。

https://gionkunz.github.io/chartist-js/getting-started.html#one-two-three-css

将其添加到<meta>标记中：

<link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css">

或使用webpack加载器（如果已配置）导入为JS中的任何文件：

import 'bower_components/chartist/dist/chartist.min.css'

Answer 2

您可以将Chartist scss直接导入到Vue组件中。

npm install chartist --save

然后，以下代码片段将帮助您开始使用Chartist并开始运行：

<template>

   <div class="my-chart ct-chart"></div>

</template>

<script>

   import Chartist from 'chartist';
   ...

</script>

<style lang="scss">

    @import "~chartist/dist/scss/chartist";
    ...

</style>

这将使ct-chart类可用，同时仍使用所有Vue构建技巧。