我设计了一个带chart.js
的简单图表,看起来很酷。
但现在我想在一个月到另一个月之间显示他们的数据。
表示他们正在关注数据:
2017年1月1日:12
2017年1月3日:16
等等..
现在我想将1月到2月的数据显示为图像,如下所示:
这是我的简单代码
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["January 2017", "February 2017", "March 2017", "April 2017", "May 2017", "June 2017", "July 2017"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132,0.25)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 15],
lineTension:0
}]
},
// Configuration options go here
options: {}
});
jsfiddle Here :https://jsfiddle.net/2qxj9t00/2/
我已经谷歌这么多次,但他们没有任何解决方案,所以善意地建议我。谢谢:))
答案 0 :(得分:0)
您可以使用以下x轴刻度回调函数来完成此操作...
ticks: {
callback: function(e) {
var tick = e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)[0];
if (tick != aR) {
aR = tick;
return tick;
}
}
}
假设您的标签数组看起来有点像.. ["1st January 2017", "3rd January 2017", "4th February 2017", ...]
ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ
var aR = null; //store already returned tick
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1st January 2017", "3rd January 2017", "4th February 2017", "9th February 2017", "3rd March 2017", "15th March 2017"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
data: [12, 16, 10, 11, 9, 15],
lineTension: 0
}]
},
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false,
callback: function(e) {
var tick = e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)[0];
if (tick != aR) {
aR = tick;
return tick;
}
}
}
}],
yAxes: [{
ticks: {
min: 0,
max: 30
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>