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 class 可用，同时仍然使用所有 Vue 构建细节。

Chartist + VueJs + Webpack 的样式问题

Styling issues with Chartist + VueJs + Webpack

typescript

webpack

vue.js

chartist.js

vuetify.js