Chart.js中x轴如何按天标注？
我目前正在尝试从blockchain.info获取数据，并在一个简单的JavaScript文件中的Chart.js上显示它。
如果我的xAxes类型是“线性”的，它就工作得很好，但是在这种情况下，x轴上的标签显示的是数字unix时间戳。
xAxes: [{
type: 'linear',
time: {
unit: 'day',
tooltipFormat: 'lll',
}
}]
我希望标签按天显示(如2018年1月27日)或按月分组(图表上30个点，1个标签-
"未捕获的错误:找不到Chart.js - Moment.js！您必须将其包含在Chart.js之前才能使用时间刻度。在https://momentjs.com下载”。
我玩了一下Momjs，并通过脚本标签对其进行了研究。不幸的是，我无法解决这个问题。
我的JSON中的数据如下所示：
{
"status": "ok",
"name": "Confirmed Transactions Per Day",
"unit": "Transactions",
"period": "day",
"description": "The number of daily confirmed Bitcoin transactions.",
"values": [
{
"x": 1442534400, // Unix timestamp (2015-09-18T00:00:00+00:00)
"y": 188330.0
},
...
}
以下是我的完整代码:
var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&cors=true';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var response = request.response;
drawChart(response);
}
function drawChart(jsonObj) {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: jsonObj["values"],
datasets: [{
label: jsonObj["name"],
data: jsonObj["values"],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'lll',
}
}]
}
}
});
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script srx="myChart.js"></script>
<body>
<canvas id="myChart" width="100%" height="100%"></canvas>
</body>
</html>共有3个答案
另外，这是我的整个剧本。
var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&cors=true';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var response = request.response;
drawChart(response);
}
function fillLabel(jsonObj){
var label = [];
var arr = jsonObj["values"];
arr.forEach(element => {
label.push((element.x));
});
return label;
}
function drawChart(jsonObj) {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: fillLabel(jsonObj),
datasets: [{
label: jsonObj["name"],
data: jsonObj["values"],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormats: {
millisecond: 'h:mm:ss.SSS a',
second: 'D MMM',
minute: 'D MMM',
hour: 'hA',
day: 'MMM D',
week: 'll',
month: 'MMM YYYY',
quarter: '[Q]Q - YYYY',
year: 'YYYY'
},
},
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
});
}
这是整个脚本。
$('#getData').on('click', function(){
var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&cors=true';
var request = new XMLHttpRequest();
let newData = [], labels = [];
let sameDate = "", previousDate = "", value = 0;
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
// Group the Data by Day
request.response.values.forEach(function(item,i){
if (previousDate !== getDateFormat(moment(item.x)._d) )
{
value = 0;
value = item.y;
sameDate = getDateFormat(moment(item.x)._d);
request.response.values.forEach(function(ele, j){
if ( j > i){
if (sameDate === getDateFormat(moment(ele.x)._d)){
value+= ele.y;
previousDate = getDateFormat(moment(ele.x)._d);
}
}
});
newData.push({x:sameDate, y:value});
labels.push(sameDate);
}
});
drawChart(newData,labels);
}
function getDateFormat(momentType)
{
console.log(momentType);
return momentType.getDate()+"-"+(momentType.getMonth()+1)+"-"+momentType.getUTCFullYear();
}
function drawChart(jsonObj,label) {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: label,
datasets: [{
label: "Average USD",
data:jsonObj}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
plugins: {
datalabels:{
borderRadius: 4,
color: 'black',
anchor: 'end',
align: 'end',
backgroundColor: function(context) {
return context.dataset.borderColor;
},
formatter: function(value, context){
// show the value on the point
return Number(value.y).toFixed(2);
},
}
}
}
});
}
});
在上图中，您可以看到数据，请注意，我将其分成三个数组，在图表中，我有两个数据集（Ingreso（x[date]，y[value]），Egreso（x[date]，y[vlue]））和“Label”，这是填充x轴标签的数据集。这就是我是如何做到的！
因此，在标签选项中，我用日期填充标签数组
-
我正在使用一个chart-js条形图，它必须放在一个小的div中，所以我在寻找一种方法来使x轴上的标签水平而不是对角线。重点是为实际的条获得尽可能多的高度，因为现在标签占据了几乎40%的可用空间。 这是我的代码： 我已经暂时禁用了xAxis标签。它的工作，但理想情况下，我希望他们是水平的。想法？
-
注意：即使某些“区域”没有值，也应该显示标签0、0.1、0.2、0.3、0.4和0.5。我尝试了我的不同选项，我发现的“最佳”是控制要显示的标签数量，但它不是我想要的：
-
我一直试图绘制时间序列数据（来自温度传感器）使用Chart.js库。python应用程序使用Flask将值和标签列表传递到. html模板文件。 经过一些迭代之后，我设法以正确的时间格式获得标签——现在由图表“newdate（）”处理——并在绘制的图表X轴刻度上被视为有效日期。 然而，读数在X轴上等间距（刻度分布是线性的），而不是按时间间隔。打印刻度的格式也需要截断为HH： mm： ss（因为数据
-
我试图设置一个固定的范围为单条，水平条形图在Chart.JS 标记数组仅在垂直轴上工作，但我希望在X轴上有一组固定的标签。 示例：https://altonwells.webflow.io/chart-js
-
以下是postgres 9.1数据库的一些SQL示例： 这是我的python脚本： 有没有办法防止标签相互重叠？理想情况下是以自动方式，因为我无法预测棒的数量。
-
问题内容： 我正在根据创建一个图： 问题是x和y轴中有不想要的标签，这些标签来自层次结构索引。因此，我想尝试删除这些标签，例如： 但这没有效果。如何删除x和y轴上的标签？ 问题答案： 没有这个问题，就很难知道标签来自何处（我不知道数据帧的外观如何，这样才能产生标签，因为默认情况下不应有任何标签。）但是，标签可以使用已知方法和群集网格的热图轴进行设置- 因此也设置为空字符串。 所以如果是一个实例，