jspm Chartist不导入CSS文件

时间:2016-02-22 07:55:53

标签: css npm aurelia jspm chartist.js

我在使用jspm Aurelia应用程序导入chartist库时遇到问题。 添加了所有样式,但仍然是奇怪的图表,而不是我正在寻找的颜色和线条。

代码包含在chartistjs主页的app.ts中的attached()方法中:

import * as Chartist from 'chartist';

export class App {
constructor() {}
attached() {
// Our labels and three data series
var data = {
    labels: ['Week1', 'Week2', 'Week3', 'Week4', 'Week5', 'Week6'],
    series: [
        [5, 4, 3, 7, 5, 10],
        [3, 2, 9, 5, 4, 6],
        [2, 1, -3, -4, -2, 0]
    ]
};

// We are setting a few options for our chart and override the defaults
var options = {

    // Don't draw the line chart points
    showPoint: false,

    // Disable line smoothing
    lineSmooth: false,

    // X-Axis specific configuration
    axisX: {

        // We can disable the grid for this axis
        showGrid: false,

        // and also don't show the label
        showLabel: false
    },

    // Y-Axis specific configuration
    axisY: {

        // Lets offset the chart a bit from the labels
        offset: 60,

        // The label interpolation function enables you to modify the values
        // used for the labels on each axis. Here we are converting the
        // values into million pound.
        labelInterpolationFnc: function (value) {
            return '$' + value + 'm';
        }
    }
};

// All you need to do is pass your configuration as third parameter to the   chart function
new Chartist.Line('.ct-chart', data, options);
}

我的app.html:

<template>
    <div class="container">
        <div id="chartist-chart" class="ct-chart"></div>
    </div>
</template>



我的Index.cshtml文件:

<div aurelia-app="main">
    <link type="text/css" rel="stylesheet"
       href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('aurelia-bootstrapper');
    </script>
</div>



我的图表如下: weird image

但应该是这样的: enter image description here
参考:https://gionkunz.github.io/chartist-js/getting-started.html

1 个答案:

答案 0 :(得分:1)

[求助]所以我需要做的就是创建我自己的'../lib/chartist.min.css'文件并在那里添加内容,并且需要在.html模板中

<template>
    <require from="../../css/lib/chartist.min.css"></require>

    <div class="container">
        <h2>Chartist</h2>
        <div id="chartist-chart" class="ct-chart"></div>
    </div>
</template>