我在使用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>
但应该是这样的:
参考:https://gionkunz.github.io/chartist-js/getting-started.html
答案 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>