[英]How to use negative numbers in chartist.js
我想在chartist.js
顯示負數,但似乎不支持負數:
我的代碼:
var _4date = 'D';
var _3date = 'C';
var _2date = 'B';
var _1date = 'A';
var _4all_scores = '-100';
var _3all_scores = '476';
var _2all_scores = '649';
var _1all_scores = '0';
var _4comments_scores = '-100';
var _3comments_scores = '20';
var _2comments_scores = '0';
var _1comments_scores = '0';
var _4transactions_scores = '0';
var _3transactions_scores = '456';
var _2transactions_scores = '649';
var _1transactions_scores = '0';
var chart = new Chartist.Line('.ct-chart', {
labels: [_1date, _2date, _3date, _4date],
series: [
[_1all_scores, _2all_scores, _3all_scores, _4all_scores],
[_1comments_scores, _2comments_scores, _3comments_scores, _4comments_scores],
[_1transactions_scores, _2transactions_scores, _3transactions_scores, _4transactions_scores]
]
}, {
low: 0,
showArea: true,
showPoint: false,
fullWidth: true
});
chart.on('draw', function(data) {
if(data.type === 'line' || data.type === 'area') {
data.element.animate({
d: {
begin: 2000 * data.index,
dur: 2000,
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
to: data.path.clone().stringify(),
easing: Chartist.Svg.Easing.easeOutQuint
}
});
}
});
解決了:
我剛剛刪除了此選項:
low: 0
也許這會幫助任何人...
我有一個面積圖,其中只有負數且已定義
var low = Math.min(...data) * 0.75;
var high = Math.max(...data) * 1.25;
這僅適用於圖表中的正數,導致該圖表已被裁剪,我根本沒有看到任何圖表。 因此,對於僅具有負數的圖表,我已定義了以下內容:
var low = Math.max(...data) * -1.25;
var high = Math.min(...data) * -0.75;
我這樣做是因為我已經用value * -1
還原了圖表-這是因為用於鏡像圖表的內置函數對我不起作用。
所以,我最終得到了這樣的東西:
function chartOptions(data, reversed=false) {
if(reversed) {
var low = Math.max(...data) * -1.25;
var high = Math.min(...data) * -0.75;
} else {
var low = Math.min(...data) * 0.75;
var high = Math.max(...data) * 1.25;
}
return {
showPoint: true,
showLine: true,
showArea: true,
fullWidth: true,
showLabel: false,
low: low,
high: high
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.