我在使用 jspm Aurelia 应用程序导入图表库时遇到问题。添加了所有样式，但仍然是奇怪的图表，而不是我正在寻找的颜色和线条。
chartistjs 主页的 app.ts 中的 attach() 方法中包含的代码：
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>
我的图表是这样的：
但应该是这样的：
参考：https ://gionkunz.github.io/chartist-js/getting-started.html