我很难让这个ChartJS显示从Websocket返回给我的这个JSON对象。我想要它做的就是像普通的条形图一样显示在这里。任何帮助将不胜感激。
的Json
[
{
"title": "Tweets",
"y_axis_label": "Number of Tweets",
"x_axis_labels": [
"12AM-06AM",
"06AM-12PM",
"12PM-06PM",
"06PM-12AM"
],
"series": [
{
"name": "Tweets",
"data": [
8,
1,
2,
0
]
},
{
"name": "Retweets",
"data": [
8679,
4692,
2105,
0
]
},
{
"name": "Replies",
"data": [
3427,
789,
1391,
0
]
},
{
"name": "Quotes",
"data": [
284,
66,
73,
0
]
},
{
"name": "Favorites",
"data": [
0,
0,
0,
0
]
}
]
},
{
"title": "Tweets",
"y_axis_label": "Number of Tweets",
"x_axis_labels": [
"12AM-06AM",
"06AM-12PM",
"12PM-06PM",
"06PM-12AM"
],
"series": [
{
"name": "Tweets",
"data": [
8,
1,
2,
0
]
}
]
},
{
"title": "Retweets",
"y_axis_label": "Number of Tweets",
"x_axis_labels": [
"12AM-06AM",
"06AM-12PM",
"12PM-06PM",
"06PM-12AM"
],
"series": [
{
"name": "Retweets",
"data": [
8679,
4692,
2105,
0
]
}
]
},
{
"title": "Replies",
"y_axis_label": "Number of Tweets",
"x_axis_labels": [
"12AM-06AM",
"06AM-12PM",
"12PM-06PM",
"06PM-12AM"
],
"series": [
{
"name": "Replies",
"data": [
3427,
789,
1391,
0
]
}
]
},
{
"title": "Quoted Tweets",
"y_axis_label": "Number of Tweets",
"x_axis_labels": [
"12AM-06AM",
"06AM-12PM",
"12PM-06PM",
"06PM-12AM"
],
"series": [
{
"name": "Quotes",
"data": [
284,
66,
73,
0
]
}
]
},
{
"title": "Favorites",
"y_axis_label": "Number of Tweets",
"x_axis_labels": [
"12AM-06AM",
"06AM-12PM",
"12PM-06PM",
"06PM-12AM"
],
"series": [
{
"name": "Favorites",
"data": [
0,
0,
0,
0
]
}
]
}
]
chartJs.js
function log(message) {
console.log((message));
}
function buildChart(title, yAxisLabel, xAxisLabels, series){
var timeStamp = json.map(function (item) {
return item.timestamp;
});
var tweet = json.map(function (item) {
return item.original_tweet;
});
var retweet = json.map(function (item) {
return item.retweet;
});
var shared = json.map(function (item) {
return item.shared;
});
var quoted = json.map(function (item) {
return item.quoted;
});
var data = {
labels: timeStamp,
datasets: [
{
label: timeStamp,
fillColor: "rgba(0,238,238, 0.8)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: tweet
},
{
label: timeStamp,
fillColor: "rgba(255,153,51, 0.8)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: retweet
},
{
label: timeStamp,
fillColor: "rgba(255,204,0, 0.8)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: shared
},
{
label: timeStamp,
fillColor: "rgba(0,51,255, 0.8)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: quoted
}
]
}};
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 1000;
ctx.canvas.height = 800;
var myChart = new Chart(ctx).Bar(data, options);
var options = Chart.defaults.global = {
responsive: true,
maintainAspectRatio: true,
tooltipFillColor: "rgba(0,0,0,0.8)",
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var legendHolder = document.createElement('div');
var formattedDate = new Date();
document.getElementById("content").innerHTML = formattedDate;
//document.getElementById('js-legend').innerHTML = myChart.generateLegend();
});
答案 0 :(得分：1)
在HTML文件中创建一个canvas元素。
<canvas id="myChart" width="400" height="400"></canvas>
获取我们想要选择的canvas元素的上下文。
var ctx = document.getElementById("myChart").getContext("2d");
将json对象的序列化版本分配给变量。
var json = [{"title":"Tweets","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Tweets","data":[8,1,2,0]},{"name":"Retweets","data":[8679,4692,2105,0]},{"name":"Replies","data":[3427,789,1391,0]},{"name":"Quotes","data":[284,66,73,0]},{"name":"Favorites","data":[0,0,0,0]}]},{"title":"Tweets","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Tweets","data":[8,1,2,0]}]},{"title":"Retweets","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Retweets","data":[8679,4692,2105,0]}]},{"title":"Replies","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Replies","data":[3427,789,1391,0]}]},{"title":"Quoted Tweets","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Quotes","data":[284,66,73,0]}]},{"title":"Favorites","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Favorites","data":[0,0,0,0]}]}];
使数据集数组显示图形。我现在不是在定制颜色，但你可以做到。
var datasets = [];
为0个基于索引的数据集生成图表。您可以应用mapper和reducer来聚合json变量。
json[0].series.forEach(function(set){
datasets.push({label: set.name, data: set.data})
});
为条形图准备数据
var data = {
labels: json[0]["x_axis_labels"],
datasets: datasets
};
绘制图表
var myBarChart = new Chart(ctx).Bar(data);