#jquery #flot
#jquery #flot
Вопрос:
Я пытаюсь отобразить простую линейную диаграмму с точками, используя jquery flot. Я не уверен, где я ошибаюсь, но я не могу получить какие-либо очки, которые будут отображаться. Вот что я делаю.
var visits = <?php echo json_encode($visits); ?>;
var views = <?php echo json_encode($pageViews); ?>;
var dates = <?php echo json_encode($dates); ?>;
$('#site_statistics').css({
height: '180px',
width: '100%'
});
$.plot($('#site_statistics'),[
{ label: 'Visits', data: visits },
{ label: 'Pageviews', data: views }
], {
grid:{
hoverable:true,
backgroundColor:'transparent'
},
xaxis: {
mode: 'time',
timeformat:'%m/%d/%y',
minTickSize: [1,'day'],
min: (new Date(dates[0])).getTime(),
max: (new Date(dates[30])).getTime()
},
yaxis: {
mode:'number',
tickSize:1,
min: 0,
tickColor:'#fff'
},
legend: {
position:'ne',
backgroundOpacity:0
},
series: {
lines: {show:true},
points: {show:true}
}
});
Это результат, который я получаю.
Я проверил, что в моих массивах есть данные через console.log (), поэтому по какой-то причине (возможно, что-то простое, чего мне не хватает) плагин не будет извлекать данные из диаграммы. Любое руководство будет очень полезным.
Спасибо!
Редактировать
Для каждого запроса здесь приведены данные, используемые для представлений
[{"09-20-2016":"2654"},{"09-21-2016":"2430"},{"09-22-2016":"2217"},{"09-23-2016":"2047"},{"09-24-2016":"2152"},{"09-25-2016":"2502"},{"09-26-2016":"2234"},{"09-27-2016":"2020"},{"09-28-2016":"1978"},{"09-29-2016":"2080"},{"09-30-2016":"1632"},{"10-01-2016":"1934"},{"10-02-2016":"2210"},{"10-03-2016":"2068"},{"10-04-2016":"1738"},{"10-05-2016":"1787"},{"10-06-2016":"1694"},{"10-07-2016":"1583"},{"10-08-2016":"1906"},{"10-09-2016":"1936"},{"10-10-2016":"2188"},{"10-11-2016":"1892"},{"10-12-2016":"2036"},{"10-13-2016":"1970"},{"10-14-2016":"2044"},{"10-15-2016":"2109"},{"10-16-2016":"2425"},{"10-17-2016":"2554"},{"10-18-2016":"2332"},{"10-19-2016":"2177"},{"10-20-2016":"723"}]
Данные для посещений
[{"09-20-2016":"1013"},{"09-21-2016":"871"},{"09-22-2016":"911"},{"09-23-2016":"845"},{"09-24-2016":"924"},{"09-25-2016":"1028"},{"09-26-2016":"877"},{"09-27-2016":"755"},{"09-28-2016":"793"},{"09-29-2016":"867"},{"09-30-2016":"747"},{"10-01-2016":"913"},{"10-02-2016":"1023"},{"10-03-2016":"971"},{"10-04-2016":"918"},{"10-05-2016":"793"},{"10-06-2016":"815"},{"10-07-2016":"813"},{"10-08-2016":"954"},{"10-09-2016":"1047"},{"10-10-2016":"1097"},{"10-11-2016":"938"},{"10-12-2016":"1022"},{"10-13-2016":"915"},{"10-14-2016":"1024"},{"10-15-2016":"1168"},{"10-16-2016":"1174"},{"10-17-2016":"1086"},{"10-18-2016":"1106"},{"10-19-2016":"1059"},{"10-20-2016":"364"}]
Данные для дат
[["09-20-2016"],["09-21-2016"],["09-22-2016"],["09-23-2016"],["09-24-2016"],["09-25-2016"],["09-26-2016"],["09-27-2016"],["09-28-2016"],["09-29-2016"],["09-30-2016"],["10-01-2016"],["10-02-2016"],["10-03-2016"],["10-04-2016"],["10-05-2016"],["10-06-2016"],["10-07-2016"],["10-08-2016"],["10-09-2016"],["10-10-2016"],["10-11-2016"],["10-12-2016"],["10-13-2016"],["10-14-2016"],["10-15-2016"],["10-16-2016"],["10-17-2016"],["10-18-2016"],["10-19-2016"],["10-20-2016"]]
Комментарии:
1. не могли бы вы опубликовать некоторые примеры данных по датам, посещениям и представлениям, которые вводятся в диаграммы?
2. Я добавил данные, используемые для представлений
Ответ №1:
Оказывается, что ваш формат даты в разделе просмотра не соответствует принятому формату.
$(document).ready(function() {
var viewsList = [{
"09-20-2016": "2654"
}, {
"09-21-2016": "2430"
}, {
"09-22-2016": "2217"
}, {
"09-23-2016": "2047"
}, {
"09-24-2016": "2152"
}, {
"09-25-2016": "2502"
}, {
"09-26-2016": "2234"
}, {
"09-27-2016": "2020"
}, {
"09-28-2016": "1978"
}, {
"09-29-2016": "2080"
}, {
"09-30-2016": "1632"
}, {
"10-01-2016": "1934"
}, {
"10-02-2016": "2210"
}, {
"10-03-2016": "2068"
}, {
"10-04-2016": "1738"
}, {
"10-05-2016": "1787"
}, {
"10-06-2016": "1694"
}, {
"10-07-2016": "1583"
}, {
"10-08-2016": "1906"
}, {
"10-09-2016": "1936"
}, {
"10-10-2016": "2188"
}, {
"10-11-2016": "1892"
}, {
"10-12-2016": "2036"
}, {
"10-13-2016": "1970"
}, {
"10-14-2016": "2044"
}, {
"10-15-2016": "2109"
}, {
"10-16-2016": "2425"
}, {
"10-17-2016": "2554"
}, {
"10-18-2016": "2332"
}, {
"10-19-2016": "2177"
}, {
"10-20-2016": "723"
}];
var visits = [{
"09-20-2016": "1013"
}, {
"09-21-2016": "871"
}, {
"09-22-2016": "911"
}, {
"09-23-2016": "845"
}, {
"09-24-2016": "924"
}, {
"09-25-2016": "1028"
}, {
"09-26-2016": "877"
}, {
"09-27-2016": "755"
}, {
"09-28-2016": "793"
}, {
"09-29-2016": "867"
}, {
"09-30-2016": "747"
}, {
"10-01-2016": "913"
}, {
"10-02-2016": "1023"
}, {
"10-03-2016": "971"
}, {
"10-04-2016": "918"
}, {
"10-05-2016": "793"
}, {
"10-06-2016": "815"
}, {
"10-07-2016": "813"
}, {
"10-08-2016": "954"
}, {
"10-09-2016": "1047"
}, {
"10-10-2016": "1097"
}, {
"10-11-2016": "938"
}, {
"10-12-2016": "1022"
}, {
"10-13-2016": "915"
}, {
"10-14-2016": "1024"
}, {
"10-15-2016": "1168"
}, {
"10-16-2016": "1174"
}, {
"10-17-2016": "1086"
}, {
"10-18-2016": "1106"
}, {
"10-19-2016": "1059"
}, {
"10-20-2016": "364"
}];
var dates = [
["09-20-2016"],
["09-21-2016"],
["09-22-2016"],
["09-23-2016"],
["09-24-2016"],
["09-25-2016"],
["09-26-2016"],
["09-27-2016"],
["09-28-2016"],
["09-29-2016"],
["09-30-2016"],
["10-01-2016"],
["10-02-2016"],
["10-03-2016"],
["10-04-2016"],
["10-05-2016"],
["10-06-2016"],
["10-07-2016"],
["10-08-2016"],
["10-09-2016"],
["10-10-2016"],
["10-11-2016"],
["10-12-2016"],
["10-13-2016"],
["10-14-2016"],
["10-15-2016"],
["10-16-2016"],
["10-17-2016"],
["10-18-2016"],
["10-19-2016"],
["10-20-2016"]
];
//Format the data into Flot compatabile data.
var viewData = [];
viewsList.forEach(function(views) {
for (var view in views) {
if (views.hasOwnProperty(view)) {
views[view] = parseInt(views[view], 10);
viewData.push([Date.parse(view), views[view]]);
}
}
});
$('#site_statistics').css({
height: '180px',
width: '99%'
});
$.plot($('#site_statistics'), [{
label: 'Pageviews',
data: viewData
}], {
grid: {
hoverable: true,
backgroundColor: 'transparent'
},
xaxis: {
mode: 'time',
timeformat: '%m-%d-%y',
minTickSize: [1, 'day'],
min: (new Date(dates[0])).getTime(),
max: (new Date(dates[30])).getTime()
},
yaxis: {
mode: 'number',
tickSize: 1000,
min: 0,
tickColor: '#fff'
},
legend: {
position: 'ne',
backgroundOpacity: 0
},
series: {
lines: {
show: true
},
points: {
symbol: "circle",
fillColor: "#058DC7"
}
}
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<div id="site_statistics"></div> Комментарии:
1. какая часть данных views неверна? Я удалил форматирование даты, чтобы она была в форме ГГГГМДД. Нужно ли мне все еще изменять форматирование?
2. хорошо, это работает, и строка отображается в Chrome, но не в Firefox. Также необходимо выяснить, что не так с легендой, поскольку она выглядит так же, как мой скриншот. Спасибо за вашу помощь!
3. Существует метод Date.parse, и он не работает в Firefox, когда формат даты ММ-ДД-ГГГГ, он должен быть ММ / ДД / ГГГГ. Вот ссылка на codepen codepen.io/jsreekanth/pen/YGdzZP