Question

我使用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}`

Morris配置：

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变量作为标签？

Answer 1

试试这个：

添加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>

morris.js chart-Javascript var as label

1 个答案: