1疾牲、下載引入
（1） bower管理器
bower包管理器变丧，執(zhí)行命令安裝
$ bower install chartist --save
備注：
bower方式安裝沙庐，可以直接下載sass格式的源代碼格式的js/css文件桐款，開發(fā)人員可以在項(xiàng)目中直接使用它們
（2） css直接引入
一種最快捷的方式就是直接引入下載的chartist編輯的js/css文件咸这，它允許開發(fā)人員使用默認(rèn)的命名方式或者可配置的方式來應(yīng)用chartist到項(xiàng)目中，也可以通過修改chartist sass源代碼文件定制需要的功能
一個簡單的示例：
<!DOCTYPE html>
<html>
<head>
<title>My first Chartist Tests</title>
<link rel="stylesheet"
href="bower_components/chartist/dist/chartist.min.css">
</head>
<body>
<!-- Site content goes here !-->
<script src="bower_components/chartist/dist/chartist.min.js"></script>
</body>
</html>
開發(fā)人員也可以通過CDN方式優(yōu)化加載性能魔眨，另一個簡單的示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" >
<script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
</head>
</html>
（3） sass
如果項(xiàng)目中要求的定制化要求較高媳维，也可以直接引入sass源代碼文件進(jìn)行定制化開發(fā)，如定制編寫自己的選擇器遏暴、定制混合模塊或者編寫配置文件實(shí)現(xiàn)更加符合自己開發(fā)習(xí)慣的應(yīng)用格式
當(dāng)然如果需要通過配置的方式來完成定制侄刽，需要將配置文件拷貝到自己的項(xiàng)目文件夾中
$ cp bower_components/chartist/dist/scss/settings/_chartist-settings.scss styles
開發(fā)人員可以修改并導(dǎo)入配置文件，然后將拷貝的chartist.scss文件導(dǎo)入項(xiàng)目中進(jìn)行使用
@import "_my-chartist-settings.scss";
@import "chartist/dist/scss/chartist.scss";
備注：關(guān)于默認(rèn)配置
配置文件中包含了
chartist的默認(rèn)類名稱以及相關(guān)選項(xiàng)朋凉，開發(fā)人員可以通過配置文件中mixins的方式修改這些默認(rèn)配置定制自己的樣式名稱州丹，常見的默認(rèn)配置如下：// Scales for responsive SVG containers $ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default; $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; // Class names to be used when generating CSS $ct-class-chart: ct-chart !default; $ct-class-chart-line: ct-chart-line !default; $ct-class-chart-bar: ct-chart-bar !default; $ct-class-horizontal-bars: ct-horizontal-bars !default; $ct-class-chart-pie: ct-chart-pie !default; $ct-class-chart-donut: ct-chart-donut !default; $ct-class-label: ct-label !default; $ct-class-series: ct-series !default; $ct-class-line: ct-line !default; $ct-class-point: ct-point !default; $ct-class-area: ct-area !default; $ct-class-bar: ct-bar !default; $ct-class-slice-pie: ct-slice-pie !default; $ct-class-slice-donut: ct-slice-donut !default; $ct-class-slice-donut-solid: ct-slice-donut-solid !default; $ct-class-grid: ct-grid !default; $ct-class-grid-background: ct-grid-background !default; $ct-class-vertical: ct-vertical !default; $ct-class-horizontal: ct-horizontal !default; $ct-class-start: ct-start !default; $ct-class-end: ct-end !default; // Container ratio $ct-container-ratio: (1/1.618) !default; // Text styles for labels $ct-text-color: rgba(0, 0, 0, 0.4) !default; $ct-text-size: 0.75rem !default; $ct-text-align: flex-start !default; $ct-text-justify: flex-start !default; $ct-text-line-height: 1; // Grid styles $ct-grid-color: rgba(0, 0, 0, 0.2) !default; $ct-grid-dasharray: 2px !default; $ct-grid-width: 1px !default; $ct-grid-background-fill: none !default; // Line chart properties $ct-line-width: 4px !default; $ct-line-dasharray: false !default; $ct-point-size: 10px !default; // Line chart point, can be either round or square $ct-point-shape: round !default; // Area fill transparency between 0 and 1 $ct-area-opacity: 0.1 !default; // Bar chart bar width $ct-bar-width: 10px !default; // Donut width (If donut width is to big it can cause issues where the shape gets distorted) $ct-donut-width: 60px !default; // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you // should set this property to false $ct-include-classes: true !default; // If this is set to true the CSS will contain colored series. You can extend or change the color with the // properties below $ct-include-colored-series: $ct-include-classes !default; // If set to true this will include all responsive container variations using the scales defined at the top of the script $ct-include-alternative-responsive-containers: $ct-include-classes !default; // Series names and colors. This can be extended or customized as desired. Just add more series and colors. $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default; $ct-series-colors: ( #d70206, #f05b4f, #f4c63d, #d17905, #453d3f, #59922b, #0544d3, #6b0392, #f05b4f, #dda458, #eacf7d, #86797d, #b2c326, #6188e2, #a748ca ) !default;
2、第一個應(yīng)用
這部分文檔是一個簡易的應(yīng)用項(xiàng)目杂彭，讓開發(fā)人員能快速掌握chartist的使用方式当叭，入門項(xiàng)目中會通過默認(rèn)的基礎(chǔ)配置實(shí)現(xiàn)一個線性圖形解構(gòu)，如果你有更復(fù)雜的應(yīng)用需求盖灸，可以參考一下高級應(yīng)用部分或者查看示例文檔
（1） 概述
chartist提供了基礎(chǔ)的api可以用于快捷構(gòu)建應(yīng)用蚁鳖，但是如果有個性化的定制需要，可以通過javascript格式的api完成顏色赁炎、線條等其他樣式的處理
① 創(chuàng)建響應(yīng)式圖例
首先要明確響應(yīng)式圖例的含義醉箕，它不需要設(shè)置固定的寬度或者高度，而是通過按比例縮放的形式動態(tài)適應(yīng)一些常見顯示區(qū)域的比例徙垫，如4:3讥裤、3:2、16:9等
備注：關(guān)于圖例的比例
設(shè)計(jì)人員理解的比例和開發(fā)人員理解的比例存在一定的差異姻报，如
320x240和300x200兩個不同的比例己英，對于設(shè)計(jì)人員可能思考的更多的是4:3或者3:2的比例關(guān)系，而對于開發(fā)人員思考的更多的是具體的像素數(shù)據(jù)
chartist中開發(fā)人員不需要設(shè)置固定的寬度或者高度吴旋，直接將圖表交給標(biāo)簽容易進(jìn)行展示即可损肛，如設(shè)置了.ct-golden-section樣式的圖表可以直接添加到設(shè)置了比例樣式的標(biāo)簽容器中即可，如
<!-- 使用 3:4的比例創(chuàng)建圖例 -->
<div class="ct-chart ct-perfect-fourth"></div>
<!-- 通過數(shù)據(jù)直接初始化圖表即可荣瑟，不需要再指定長度治拿、寬度的數(shù)據(jù) -->
<script>
var data = {
// A labels array that can contain any sort of values
// 一個包含展示內(nèi)容的數(shù)組（可以包含任意類型的數(shù)據(jù)）
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
// Our series array that contains series objects or in this case series data arrays
// 一個包含數(shù)據(jù)的數(shù)組（可以包含對象等其他格式的數(shù)據(jù)）
series: [
[5, 2, 4, 2, 0]
]
};
// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
// 第一個參數(shù)是一個選擇器，用于創(chuàng)建對應(yīng)的圖表對象
// 第二個參數(shù)是需要處理的數(shù)據(jù)
new Chartist.Line('.ct-chart', data);
</script>
代碼執(zhí)行后笆焰，展示的圖表數(shù)據(jù)
image.png
備注：一些常見的比例
容器樣式 Container Class長寬比例 Ratio.ct-square 1 .ct-minor-second 15:16 .ct-major-second 8:9 .ct-minor-third 5:6 .ct-major-third 4:5 .ct-perfect-fourth 3:4 .ct-perfect-fifth 2:3 .ct-minor-sixth 5:8 .ct-golden-section 1:1.618 .ct-major-sixth 3:5 .ct-minor-seventh 9:16 .ct-major-seventh 8:15 .ct-octave 1:2 .ct-major-tenth 2:5 .ct-major-eleventh 3:8 .ct-major-twelfth 1:3 .ct-double-octave 1:4
② 創(chuàng)建固定維度圖例
開發(fā)人員如果要創(chuàng)建具有固定的高度和寬度的圖例劫谅，可以通過Chartist實(shí)例中添加相關(guān)選項(xiàng)配置即可
備注：此時可以省略指定長寬比例的樣式名稱
.ct-perfect-fourth；即使指定也會被默認(rèn)設(shè)定無效！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./libs/chartist.min.css">
</head>
<body>
<div class="ct-chart"></div>
<script src="./libs/chartist.min.js"></script>
<script>
var data = {
// A labels array that can contain any sort of values
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
// Our series array that contains series objects or in this case series data arrays
series: [
[5, 2, 4, 2, 0]
]
};
// As options we currently only set a static size of 300x200 px.
// 設(shè)置固定的長寬比例
// We can also omit this and use aspect ratio containers
// as you saw in the previous example
// 我們也可以省略這個固定配置就會得到長寬比例的圖表
// 參考上一個項(xiàng)目
var options = {
width: 300,
height: 200
};
// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
new Chartist.Line('.ct-chart', data, options);
</script>
</body>
</html>
image.png
③ 單頁面多圖例
如果需要在一個頁面中創(chuàng)建多個圖例進(jìn)行展示捏检，不推薦使用上述class樣式名稱的方式荞驴，而是推薦通過標(biāo)簽id屬性進(jìn)行圖表容器的掛載匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./libs/chartist.min.css">
</head>
<body>
<div style="display: flex;">
<div class="ct-chart" id="chart1"></div>
<div class="ct-chart " id="chart2"></div>
</div>
<script src="./libs/chartist.min.js"></script>
<script>
// Initialize a Line chart in the container with the ID chart1
new Chartist.Line('#chart1', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]],
}, {width: 400, height: 240});
// Initialize a Line chart in the container with the ID chart2
new Chartist.Bar('#chart2', {
labels: [1, 2, 3, 4],
series: [[5, 2, 8, 3]]
}, {width: 300, height: 200});
</script>
</body>
</html>
實(shí)現(xiàn)效果如圖所示：
image.png
（2） 圖例配置
Chartist圖例提供了非常靈活的配置，幾乎可以配置圖例中展示的任何數(shù)據(jù)贯城；它提供的默認(rèn)的配置（參考官方API）中也提供了大量的預(yù)定義的配置信息供開發(fā)人員使用戴尸，實(shí)際應(yīng)用時可以通過Chartist實(shí)例的配置選項(xiàng)覆蓋默認(rèn)配置
添加配置的折線圖例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./libs/chartist.min.css">
</head>
<body>
<div class="ct-chart"></div>
<script src="./libs/chartist.min.js"></script>
<script>
// Our labels and three data series
// 一個圖例中展示多套數(shù)據(jù)
var data = {
labels: ['第一周', '第二周', '第三周', '第四周', '第五周', '第六周'],
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
// 給圖例添加自定義配置，覆蓋默認(rèn)配置
var options = {
// 不展示坐標(biāo)點(diǎn)
// Don't draw the line chart points
showPoint: false,
// 不做平滑處理
// Disable line smoothing
lineSmooth: false,
// X-Axis specific configuration
axisX: {
// 不展示網(wǎng)格
// We can disable the grid for this axis
showGrid: false,
// 不展示標(biāo)簽提示
// 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.
// 通過函數(shù)設(shè)置指定展示的標(biāo)記
labelInterpolationFnc: function (value) {
return '$' + value + 'm';
}
},
width: 500,
height: 300
};
// All you need to do is pass your configuration as third parameter to the chart function
new Chartist.Line('.ct-chart', data, options);
</script>
</body>
</html>
實(shí)現(xiàn)效果如圖所示：
image.png
（3）響應(yīng)式處理
網(wǎng)頁視圖的響應(yīng)式設(shè)計(jì)一般都是基于媒體查詢的冤狡，圖例在不同的媒體設(shè)備上展示的效果可能也有差異；不過好在圖例是在一個容器窗口中進(jìn)行展示的项棠，開發(fā)人員只需要對容器窗口進(jìn)行媒體配置也可以實(shí)現(xiàn)多種不同媒體響應(yīng)式的處理
① 覆蓋默認(rèn)配置
通過覆蓋機(jī)制悲雳，讓不同的媒體設(shè)備上的響應(yīng)式處理變得比較簡單，覆蓋機(jī)制的優(yōu)先級基于媒體查詢順序
下面的示例就是在不同的展示尺寸的設(shè)備上香追，讓圖例的尺寸合瓢、標(biāo)簽、條狀圖間距等進(jìn)行調(diào)整的一種響應(yīng)式場景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./libs/chartist.min.css">
</head>
<body>
<div class="ct-chart ct-minor-seventh"></div>
<script src="./libs/chartist.min.js"></script>
<script>
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};
var options = {
seriesBarDistance: 15
};
// 響應(yīng)式配置
var responsiveOptions = [
['screen and (min-width: 641px) and (max-width: 1024px)', {
// 屏幕尺寸641~1024 間距10像素
seriesBarDistance: 10,
axisX: {
labelInterpolationFnc: function (value) {
return value;
}
}
}],
['screen and (max-width: 640px)', {
// 屏幕尺寸<640 間距5像素
seriesBarDistance: 5,
// 屏幕尺寸<640 展示標(biāo)簽第一個字符
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}]
];
new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
</script>
</body>
</html>
實(shí)現(xiàn)效果如圖：可以縮放窗口查看效果
image.png
② 不同數(shù)據(jù)不同配置
有需求的情況下開發(fā)人員甚至可以給一張圖例中的不同數(shù)據(jù)列添加不同的配置項(xiàng)透典，包括響應(yīng)式配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./libs/chartist.min.css">
</head>
<body>
<div class="ct-chart ct-minor-seventh"></div>
<script src="./libs/chartist.min.js"></script>
<script>
// 參數(shù)1：選擇器
// 參數(shù)2：數(shù)據(jù)
// 參數(shù)3：配置
var chart = new Chartist.Line('.ct-chart', {
// X方向顯示標(biāo)簽內(nèi)容
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
// Naming the series with the series object array notation
// 數(shù)組的形式晴楔，設(shè)置多項(xiàng)命名數(shù)據(jù)列
series: [{
name: 'series-1',
data: [5, 2, -4, 2, 0, -2, 5, -3]
}, {
name: 'series-2',
data: [4, 3, 5, 3, 1, 3, 6, 4]
}, {
name: 'series-3',
data: [2, 4, 3, 1, 4, 5, 3, 2]
}]
}, {
fullWidth: true,
// Within the series options you can use the series names
// to specify configuration that will only be used for the
// specific series.
// 數(shù)據(jù)配置項(xiàng)中可以通過上面數(shù)組中的命名名稱進(jìn)行指定配置
series: {
'series-1': {
// 階梯線條
lineSmooth: Chartist.Interpolation.step()
},
'series-2': {
// 基本配置的線條
lineSmooth: Chartist.Interpolation.simple(),
// 顯示包含區(qū)域
showArea: true
},
'series-3': {
// 不展示坐標(biāo)點(diǎn)
showPoint: false
}
}
}, [
// You can even use responsive configuration overrides to
// customize your series configuration even further!
// 可以通過命名名稱，添加響應(yīng)式配置覆蓋默認(rèn)配置
['screen and (max-width: 640px)', {
series: {
'series-1': {
lineSmooth: Chartist.Interpolation.none()
},
'series-2': {
lineSmooth: Chartist.Interpolation.none(),
showArea: false
},
'series-3': {
lineSmooth: Chartist.Interpolation.none(),
showPoint: true
}
}
}]
]);
</script>
</body>
</html>
實(shí)現(xiàn)效果展示：調(diào)整窗口大小峭咒，響應(yīng)式配置生效
image.png
image.png
3税弃、自定義樣式
很多時候友好的界面對數(shù)據(jù)的有效展示非常重要，開發(fā)人員可以通過CSS樣式提升數(shù)據(jù)圖表友好性
（1） 定義默認(rèn)名稱
Chartist提供了一個高度定制的sass文件凑队，允許開發(fā)人員可以自定義圖表上展示的任意數(shù)據(jù)視圖则果，包括數(shù)據(jù)視圖、線條樣式漩氨、線條寬度西壮、線條顏色等等，如果你有sass相關(guān)的經(jīng)驗(yàn)叫惊，強(qiáng)烈建議使用sass版本的Chartist進(jìn)行開發(fā)
備注：關(guān)于默認(rèn)配置
默認(rèn)情況下
Chartist自動生成的樣式名稱都是ct-series-a開頭的款青，并且字母a會與每個數(shù)據(jù)a/b/c/d等一起迭代展示，如果需要處理特定數(shù)據(jù)的樣式霍狰，就需要給相應(yīng)的數(shù)據(jù)類名稱創(chuàng)建特定的樣式
① 線性圖默認(rèn)樣式
/* Use this selector to override the line style on a given series */
.ct-series-a .ct-line {
/* Set the colour of this series line */
stroke: red;
/* Control the thikness of your lines */
stroke-width: 5px;
/* Create a dashed line with a pattern */
stroke-dasharray: 10px 20px;
}
/* This selector overrides the points style on line charts. Points on line charts are actually just very short strokes. This allows you to customize even the point size in CSS */
.ct-series-a .ct-point {
/* Colour of your points */
stroke: red;
/* Size of your points */
stroke-width: 20px;
/* Make your points appear as squares */
stroke-linecap: square;
}
② 條狀圖默認(rèn)樣式
/* Use this selector to override bar styles on bar charts. Bars are also strokes so you have maximum freedom in styling them. */
.ct-series-a .ct-bar {
/* Colour of your bars */
stroke: red;
/* The width of your bars */
stroke-width: 20px;
/* Yes! Dashed bars! */
stroke-dasharray: 20px;
/* Maybe you like round corners on your bars? */
stroke-linecap: round;
}
③ 餅狀圖默認(rèn)樣式
/* Pie charts consist of solid slices where you can use this selector to override the default style. */
.ct-series-a .ct-slice-pie {
/* fill of the pie slieces */
fill: hsl(120, 40%, 60%);
/* give your pie slices some outline or separate them visually by using the background color here */
stroke: white;
/* outline width */
stroke-width: 4px;
}
④ 圓環(huán)圖默認(rèn)樣式
/* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */
.ct-series-a .ct-slice-donut {
/* give the donut slice a custom colour */
stroke: blue;
/* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
stroke-width: 5px !important;
/* create modern looking rounded donut charts */
stroke-linecap: round;
}
（2）圖例上色案例
圖例中數(shù)據(jù)線條的顏色展示是一個非常重要的核心樣式抡草，但是要達(dá)到外觀和功能的分離，Chartist中并沒有提供和顏色相關(guān)的配置選項(xiàng)蔗坯，如果有必要的情況下需要開發(fā)人員通過自定義樣式實(shí)現(xiàn)渠牲，避免造成后期維護(hù)困難
備注：
Chartist默認(rèn)提供了15中顏色給圖例進(jìn)行展示，開發(fā)人員如果只是覆蓋其中的部分顏色步悠，建議自定義樣式實(shí)現(xiàn)
① 基本著色
代碼操作：通過自定義樣式名稱签杈，覆蓋線形圖中前兩個數(shù)據(jù)的線條和坐標(biāo)點(diǎn)的顏色
.ct-series-a .ct-line,
.ct-series-a .ct-point {
stroke: blue;
}
.ct-series-b .ct-line,
.ct-series-b .ct-point {
stroke: red;
}
上一個案例代碼中，加入該自定義樣式，展示效果如圖所示：
- 第一個數(shù)據(jù)列的線條變成了自定義藍(lán)色答姥，第二個數(shù)據(jù)列線條變成了自定義紅色
- 第三個數(shù)據(jù)列的線條依然是默認(rèn)顏色 橙色
image.png
② 動態(tài)著色
通過默認(rèn)的預(yù)定義class名稱進(jìn)行數(shù)據(jù)列的顏色設(shè)置已經(jīng)可以滿足大部分場景铣除，但是css的特性決定了對動態(tài)顏色設(shè)置并不是十分友好，那如果有要求要開發(fā)動態(tài)熱力圖或者動態(tài)處理折線數(shù)量應(yīng)該怎么操作鹦付？
Chartist提供了一種事件驅(qū)動的動態(tài)圖例方式尚粘，允許開發(fā)人員通過draw事件直接操作圖例中的任意數(shù)據(jù)和樣式，我們通過一個案例觀察如何通過數(shù)據(jù)動態(tài)設(shè)置圖例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./libs/chartist.min.css">
</head>
<body>
<div class="ct-chart ct-minor-seventh"></div>
<script src="./libs/chartist.min.js"></script>
<script>
var count = 45;
var max = 100;
// Creating a bar chart with no labels and a series array with one series.
// For the series we generate random data with `count` elements and
// random data ranging from 0 to `max`.
// 創(chuàng)建一個沒有l(wèi)abel展示標(biāo)簽和單列數(shù)據(jù)的條狀圖
// 數(shù)據(jù)列隨機(jī)產(chǎn)生count數(shù)量個0~max的隨機(jī)數(shù)
var chart = new Chartist.Bar('.ct-chart', {
labels: Chartist.times(count),
series: [
Chartist.times(count).map(Math.random).map(Chartist.mapMultiply(max))
]
}, {
axisX: {
showLabel: false
},
axisY: {
onlyInteger: true
}
});
// This is the bit we are actually interested in. By registering a callback for `draw` events, we can actually intercept the drawing process of each element on the chart.
chart.on('draw', function (context) {
// First we want to make sure that only do something when the draw event is for bars. Draw events do get fired for labels and grids too.
if (context.type === 'bar') {
// With the Chartist.Svg API we can easily set an attribute on our bar that just got drawn
context.element.attr({
// Now we set the style attribute on our bar to override the default color of the bar. By using a HSL colour we can easily set the hue of the colour dynamically while keeping the same saturation and lightness. From the context we can also get the current value of the bar. We use that value to calculate a hue between 0 and 100 degree. This will make our bars appear green when close to the maximum and red when close to zero.
style: 'stroke: hsl(' + Math.floor(Chartist.getMultiValue(context.value) / max * 100) + ', 50%, 50%);'
});
}
});
</script>
</body>
</html>
實(shí)現(xiàn)效果如圖所示：
image.png
4敲长、高級應(yīng)用
Chartist是一個非常靈活的圖例庫郎嫁，在提供的基礎(chǔ)api上允許開發(fā)人員可以自己實(shí)現(xiàn)一些其他擴(kuò)展功能
