я использую morris.js
графики для моей страницы статистики написаны на php, и я хочу сделать несколько ярлыков.
Мой массив данных выглядит так:
{ y: '2015-12-24', z0: 'page' , a0: 275, z1: 'fb' , a1: 75, z2: 'Gimper' , a2: 45, z3: 'KolegaIgnacy' , a3: 30, z4: 'ponki' , a4: 25},
{ y: '2015-12-25', z0: 'page' , a0: 440, z1: 'Rojo' , a1: 332, z2: 'fb' , a2: 145, z3: 'mamiko' , a3: 134, z4: 'Gimper' , a4: 44},
{ y: '2015-12-26', z0: 'izak' , a0: 450, z1: 'page' , a1: 425, z2: 'Nitro' , a2: 330, z3: 'fb' , a3: 152, z4: 'Rojo' , a4: 45},
{ y: '2015-12-27', z0: 'izak' , a0: 462, z1: 'page' , a1: 435, z2: 'Nitro' , a2: 219, z3: 'fb' , a3: 182, z4: 'Mandzio' , a4: 145},
{ y: '2015-12-28', z0: 'page' , a0: 504, z1: 'fb' , a1: 162, z2: 'Nitro' , a2: 77, z3: 'Mandzio' , a3: 66, z4: 'Gimper' , a4: 53},
{ y: '2015-12-29', z0: 'page' , a0: 400, z1: 'fb' , a1: 162, z2: 'Naruciak' , a2: 76, z3: 'ponki' , a3: 46, z4: 'Nitro' , a4: 40},
{ y: '2015-12-30', z0: 'page' , a0: 260, z1: 'fb' , a1: 79, z2: 'dg' , a2: 79, z3: 'ponki' , a3: 56, z4: 'Naruciak' , a4: 21},
{ y: '2015-12-31', z0: 'page' , a0: 129, z1: 'fb' , a1: 42, z2: 'ponki' , a2: 30, z3: 'dg' , a3: 17, z4: 'Nitro' , a4: 12},
{ y: '2016-01-01', z0: 'page' , a0: 229, z1: 'fb' , a1: 89, z2: 'ponki' , a2: 35, z3: 'Nitro' , a3: 22, z4: 'izak' , a4: 12},
{ y: '2016-01-02', z0: 'page' , a0: 311, z1: 'fb' , a1: 117, z2: 'ponki' , a2: 42, z3: 'Nitro' , a3: 35, z4: 'Naruciak' , a4: 28},
{ y: '2016-01-03', z0: 'page' , a0: 396, z1: 'fb' , a1: 172, z2: 'Naruciak' , a2: 86, z3: 'dg' , a3: 31, z4: 'Rojo' , a4: 25},
{ y: '2016-01-04', z0: 'page' , a0: 369, z1: 'Mandzio' , a1: 152, z2: 'fb' , a2: 131, z3: 'Naruciak' , a3: 58, z4: 'ponki' , a4: 25},
{ y: '2016-01-05', z0: 'page' , a0: 360, z1: 'fb' , a1: 115, z2: 'Mandzio' , a2: 114, z3: 'Yoczook' , a3: 74, z4: 'Naruciak' , a4: 70},
{ y: '2016-01-06', z0: 'page' , a0: 497, z1: 'Naruciak' , a1: 165, z2: 'fb' , a2: 164, z3: 'dg' , a3: 83, z4: 'Rembol' , a4: 79},
{ y: '2016-01-07', z0: 'izak' , a0: 993, z1: 'Rojo' , a1: 553, z2: 'page' , a2: 329, z3: 'Isamu' , a3: 176, z4: 'fb' , a4: 64}`
Конфигурация Морриса:
var webview_trend = [<?php foreach($stat_webviev_trend AS $key=>$value)
echo $value;?>],
webview_trend_config = {
data: webview_trend,
xkey: 'y',
ykeys: ['a0', 'a1', 'a2', 'a3', 'a4'],
labels: [? ? ? ?],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
stacked: true,
pointFillColors:['#ffffff'],
pointStrokeColors: ['black'],
lineColors:['lime', 'blue', 'red', 'cyan', '#909090']
};
webview_trend_config.element = 'webview_trend';
Morris.Bar(webview_trend_config);
Вопрос: Возможно ли сделать z0-z4 vars в качестве меток?
Попробуй это:
добавлять hoverCallback
функция, которая обновляет метки на основе данных вашего webview_trend
:
var data = [
{ y: '2015-12-24', z0: 'page' , a0: 275, z1: 'fb' , a1: 75, z2: 'Gimper' , a2: 45, z3: 'KolegaIgnacy' , a3: 30, z4: 'ponki' , a4: 25},
{ y: '2015-12-25', z0: 'page' , a0: 440, z1: 'Rojo' , a1: 332, z2: 'fb' , a2: 145, z3: 'mamiko' , a3: 134, z4: 'Gimper' , a4: 44},
{ y: '2015-12-26', z0: 'izak' , a0: 450, z1: 'page' , a1: 425, z2: 'Nitro' , a2: 330, z3: 'fb' , a3: 152, z4: 'Rojo' , a4: 45},
{ y: '2015-12-27', z0: 'izak' , a0: 462, z1: 'page' , a1: 435, z2: 'Nitro' , a2: 219, z3: 'fb' , a3: 182, z4: 'Mandzio' , a4: 145},
{ y: '2015-12-28', z0: 'page' , a0: 504, z1: 'fb' , a1: 162, z2: 'Nitro' , a2: 77, z3: 'Mandzio' , a3: 66, z4: 'Gimper' , a4: 53},
{ y: '2015-12-29', z0: 'page' , a0: 400, z1: 'fb' , a1: 162, z2: 'Naruciak' , a2: 76, z3: 'ponki' , a3: 46, z4: 'Nitro' , a4: 40},
{ y: '2015-12-30', z0: 'page' , a0: 260, z1: 'fb' , a1: 79, z2: 'dg' , a2: 79, z3: 'ponki' , a3: 56, z4: 'Naruciak' , a4: 21},
{ y: '2015-12-31', z0: 'page' , a0: 129, z1: 'fb' , a1: 42, z2: 'ponki' , a2: 30, z3: 'dg' , a3: 17, z4: 'Nitro' , a4: 12},
{ y: '2016-01-01', z0: 'page' , a0: 229, z1: 'fb' , a1: 89, z2: 'ponki' , a2: 35, z3: 'Nitro' , a3: 22, z4: 'izak' , a4: 12},
{ y: '2016-01-02', z0: 'page' , a0: 311, z1: 'fb' , a1: 117, z2: 'ponki' , a2: 42, z3: 'Nitro' , a3: 35, z4: 'Naruciak' , a4: 28},
{ y: '2016-01-03', z0: 'page' , a0: 396, z1: 'fb' , a1: 172, z2: 'Naruciak' , a2: 86, z3: 'dg' , a3: 31, z4: 'Rojo' , a4: 25},
{ y: '2016-01-04', z0: 'page' , a0: 369, z1: 'Mandzio' , a1: 152, z2: 'fb' , a2: 131, z3: 'Naruciak' , a3: 58, z4: 'ponki' , a4: 25},
{ y: '2016-01-05', z0: 'page' , a0: 360, z1: 'fb' , a1: 115, z2: 'Mandzio' , a2: 114, z3: 'Yoczook' , a3: 74, z4: 'Naruciak' , a4: 70},
{ y: '2016-01-06', z0: 'page' , a0: 497, z1: 'Naruciak' , a1: 165, z2: 'fb' , a2: 164, z3: 'dg' , a3: 83, z4: 'Rembol' , a4: 79},
{ y: '2016-01-07', z0: 'izak' , a0: 993, z1: 'Rojo' , a1: 553, z2: 'page' , a2: 329, z3: 'Isamu' , a3: 176, z4: 'fb' , a4: 64}
]
Morris.Bar({
element: 'chart',
data: data,
xkey: 'y',
ykeys: ['a0', 'a1', 'a2', 'a3', 'a4'],
labels: ['Label1', 'Label2', 'Label3', 'Label4', 'Label5'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
stacked: true,
pointFillColors:['#ffffff'],
pointStrokeColors: ['black'],
lineColors:['lime', 'blue', 'red', 'cyan', '#909090'],
xLabelAngle: 60,
hoverCallback: function (index, options, content, row) {
var currentDiv = "";
var finalContent = $("<div/>");
$(content).each(function () {
currentDiv = $(this);
currentDiv.html(currentDiv.html().replace("Label1", data[index].z0).replace("Label2", data[index].z1).replace("Label3", data[index].z2).replace("Label4", data[index].z3).replace("Label5", data[index].z4))
$(finalContent).append(currentDiv);
});
$(finalContent)
return finalContent;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="chart"></div>
Других решений пока нет …