0
這是我第一次使用ChartJS v2。 我用幾個數據集創建一個簡單的折線圖。ChartJS - 傳說和工具提示選項
我有3個問題:
1 - 它已表現出正確的數據,但我有傳說中的問題,因爲他們似乎只剩下顏色框而出畫布對齊,像每行一個在圖像下方(https://i.stack.imgur.com/c9qBe.png)。
我要像在CSS float: left;
的傳說。
2 - 其他問題是工具提示,它們非常大..如下圖所示。 (https://i.stack.imgur.com/txXCF.png)
我試圖找到實現這一目標的選擇,但我很難使其工作。
3 - 我希望y軸的間隔爲1而不是0.1。
貝婁是用於創建圖表的JS代碼:
var scripts = $(".sending-data");
var datasets = [];
var days = [];
var counter = 0;
scripts.each(function (index, script){
var json = JSON.parse(script.innerHTML);
var data = [];
for (var i = 0; i<json.DATA.length; i++) {
data.push(json.DATA[i][2]);
if (counter === 0)
days.push(json.DATA[i][1].substr(8, 2));
}
var r = Math.floor((Math.random() * 255) + 1);
var g = Math.floor((Math.random() * 255) + 1);
var b = Math.floor((Math.random() * 255) + 1);
var rgbStr = r+ ", " +g + ", " + b;
console.log(rgbStr);
datasets.push({
label: "## " + $(script).attr("data-send-id"),
backgroundColor: 'rgba('+rgbStr+', 0.2)',
borderColor: 'rgba('+rgbStr+', 1)',
borderWidth: 2,
lineTension: 0.1,
data: data,
fill: false
});
counter++;
});
var config ={
type: 'line',
data: {
labels: days,
datasets: datasets
},
options: {
title: {
display: true,
text: 'Custom Chart Title'
},
responsive : true,
legend: {
fullWidth: false,
boxWidth: 50,
padding: 40,
position: "top",
display: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1
}
}]
}
}
};
var ctx = document.querySelector("##canvas-chart").getContext("2d");
console.log(document.querySelector("##canvas-chart"));
var myLine = new Chart(ctx, config);
不介意的 '##' 選擇器,我使用CFusion。 你們有什麼幫助嗎?
--DISCLAIMER-- 我設法設置stepSize: 1
這樣的時間間隔爲1,但仍然有問題(1)和(2)提前
謝謝! 快樂編程!
這兩個圖像似乎不工作.. – SilentCoder
我添加圖像鏈接imgur @SilentCoder –
很抱歉,我無法查看圖像。那麼你的工具提示中的字體大小呢? – SilentCoder