使用多数据使用 chartjs 绘制图表
Use multi data to draw chart with chartjs
我正在尝试使用chartjs绘制折线图。这是我的数据示例:
{"receiver_id":"3","broadcaster_id":"1","signal_strength":"34","date_time":"2015-06-18 17:13:05"},
{"receiver_id":"5","broadcaster_id":"1","signal_strength":"37","date_time":"2015-06-18 17:13:06"},
{"receiver_id":"4","broadcaster_id":"1","signal_strength":"35","date_time":"2015-06-18 17:13:09"},
{"receiver_id":"1","broadcaster_id":"1","signal_strength":"36","date_time":"2015-06-18 17:13:11"}
我试图遵循chartjs的文档,但它没有用。我该怎么办?
这是我的代码片段:
(function( $ ) {
$.ajax({
url: "records.json",
dataType: "json",
success: function(data){
console.log(data);
drawChart(data);
},
fail: function(){
console.log("Error");
}
});
var drawChart = function(data){
var receiver1_data = [];
var receiver1_time = [];
var receiver3_data = [];
var receiver3_time = [];
var receiver4_data = [];
var receiver4_time = [];
var receiver5_data = [];
var receiver5_time = [];
for(var i = 0, j = data.length; i < j ; i++){
if(data[i]["receiver_id"] == 1){
receiver1_data.push(data[i]["signal_strength"]);
receiver1_time.push(data[i]["date_time"]);
}
if(data[i]["receiver_id"] == 3){
receiver3_data.push(data[i]["signal_strength"]);
receiver3_time.push(data[i]["date_time"]);
}
if(data[i]["receiver_id"] == 4){
receiver4_data.push(data[i]["signal_strength"]);
receiver4_time.push(data[i]["date_time"]);
}
if(data[i]["receiver_id"] == 5){
receiver5_data.push(data[i]["signal_strength"]);
receiver5_time.push(data[i]["date_time"]);
}
}
var line_data1 = {
labels: receiver1_time,
datasets: [
{
label: "Receiver 1",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "green",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: receiver1_data
}
]
};
var line_data3 = {
labels: receiver3_time,
datasets: [
{
label: "Receiver 3",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "blue",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: receiver3_data
}
]
};
var line_data4 = {
labels: receiver4_time,
datasets: [
{
label: "Receiver 3",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "orange",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: receiver4_data
}
]
};
var line_data5 = {
labels: receiver5_time,
datasets: [
{
label: "Receiver 3",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "violet",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: receiver5_data
}
]
};
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(line_data1);
myLineChart.add(line_data3);
myLineChart.add(line_data4);
myLineChart.add(line_data5);
myLineChart.update();
}
}(jQuery));
<script src="https://raw.githubusercontent.com/nnnick/Chart.js/master/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
编辑:我忘了提到我想为4个不同的receiver_id显示4个不同的行。
AddData
时,还必须指定 X 轴值。尝试类似myLineChart.AddData(line_data3,receiver3_time);
相关文章:
- 当我在重新启动cordova应用程序后尝试添加更多数据时,lokijs会丢失数据库和收集中的数据
- 如何在angularjs中按顺序执行多数据ng应用程序
- 如何在滚动时加载更多数据
- 选择.js在“onItemAdd”回调中获取更多数据
- 将更多数据追加到现有数据中
- 如何使用jquery将更多数据添加到现有数据中
- 将更多数据与选择选项相关联的正确方法是什么,而不仅仅是“值”
- 从新的 JSON URL 加载更多数据
- 隐藏由多数据属性与现有变量匹配 jQuery/JavaScript
- 展开表格行以显示更多数据
- 从 flare.json for d3.tree 访问更多数据
- 加载更多数据按钮主干
- ajax在没有更多数据的情况下隐藏加载更多按钮
- 在通过函数将数字转换为日期并加载刷新更多数据中
- 在高图表中添加更多数据
- 我是不是用javascript循环向页面写入了太多数据
- 加载更多数据ajax PHP onscroll
- 加载更多数据- ScrollTop功能不起作用
- Jquery显示/隐藏更多数据
- 使用多数据使用 chartjs 绘制图表