javascript - 在莫里斯图栏顶部显示计数？-6ren

javascript - 在莫里斯图栏顶部显示计数？

转载作者：行者123 更新时间：2023-12-03 04:43:58

24

4

我想使用莫里斯图表栏显示一些数据分析，我的图表栏完美地显示了我的数据，但我面临一个问题，即计数应该显示在每个图表栏中。

我有以下脚本来显示图表:

<?php 
    $first_month_query  = mysqli_query($con, "SELECT COUNT(`ft_booking_date`) as day_count, DATE_FORMAT(`ft_booking_date`, '%d-%b') as Booking_date FROM `jps_final_tickets` WHERE `ft_event`= '$getEventId' AND `ft_booking_date` >= DATE_FORMAT(curdate(), '%Y-%m-01') GROUP BY DATE_FORMAT(`ft_booking_date`, '%d-%b')") or die(mysqli_error($con));
    $json_data_current_day = array();
    foreach( $first_month_query as $result){
        $json_array_first_day['y']= $result['Booking_date'];  
        $json_array_first_day['a']=$result['day_count'];
        array_push($json_data_current_day, $json_array_first_day);
    }
    ?>
    <div class="col-md-12">
        <div class="form-group" id="day-wise"></div>
    </div>



<script>
Morris.Bar({
    element: 'day-wise',
    data: <?php echo json_encode($json_data_current_day); ?>,
    xkey: 'y',
    ykeys: ['a'],
    labels: ['Members Count']
});
</script>

因此，根据上面的屏幕截图，它工作正常，但现在我想在每个栏上显示成员计数，现在悬停时显示成员计数。

那么，我如何在每个栏上显示成员(member)计数。

最佳答案

Morris.Bar({
  element: 'bar-example',
  data: [{
    device: 'iPhone',
    geekbench: 136
  }, {
    device: 'iPhone 3G',
    geekbench: 137
  }, {
    device: 'iPhone 3GS',
    geekbench: 275
  }, {
    device: 'iPhone 4',
    geekbench: 380
  }, {
    device: 'iPhone 4S',
    geekbench: 655
  }, {
    device: 'iPhone 5',
    geekbench: 1571
  }],
  xkey: 'device',
  ykeys: ['geekbench'],
  labels: ['Geekbench'],
  barRatio: 100,
  xLabelAngle: 35,
  hideHover: 'always'
});

var data = [{
  device: 'iPhone',
  geekbench: 136
}, {
  device: 'iPhone 3G',
  geekbench: 137
}, {
  device: 'iPhone 3GS',
  geekbench: 275
}, {
  device: 'iPhone 4',
  geekbench: 380
}, {
  device: 'iPhone 4S',
  geekbench: 655
}, {
  device: 'iPhone 5',
  geekbench: 1571
}];

for (var i = 0; i < data.length; i++) {
  var a = $('svg text:nth(' + (i+data.length-1) + ')').clone();
  
   var b = a.children('tspan')[0];
  b.textContent=data[data.length-i-1].geekbench;
  b.setAttribute('dy', 24);
  $(a).appendTo($('svg'))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>

<body>
  <div id="bar-example"></div>
</body>

Moris 使用事件委托(delegate)来显示悬停。因此，您最好复制 $('morris-hover morris-default-style') 一段时间。或者为每个矩形附加文本栏如下。

let data=<?php echo json_encode($json_data_current_day)[i]; ?>;

for(let i=0;i<data.length;i++){
    $('#day-wise svg > rect:nth-child('+i+')').append('<text>'+data[i]+'</text>')
}

我举了一个例子。 http://codepen.io/fanyer/pen/aJYMMa

关于javascript - 在莫里斯图栏顶部显示计数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42948696/

24

4

0

文章推荐： javascript - 平滑滚动至姓名和 ID

文章推荐： javascript - 递归函数图

php 计数 vs sql 计数 vs 计数字段？演出
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
javascript 计数
我有点卡在 JavaScript 逻辑上来完成这个任务。基本上如果我给出一个数字(比如 30) 我想在两边都显示 5。所以 25 26 27 28 29 30 31 32 33 34 35 这部
你能发现这段代码中的逻辑错误吗？计数
我编写的程序有问题。我无法获得输入字符串的正确字数，但我获得了正确的最长字符数。我不知道为什么，但这是我的代码。我正在做的是将一个字符串传递给一个函数，该函数将字符串中的所有字母大写。然后，该函数逐个
Android错误循环 "for"计数
我有功能 public ArrayList vyberNahodnaPismena() { String[] seznamPismen = {"A", "Á", "B", "C", "Č",
postgresql 计数
这可以在 PGSQL 中完成吗？我有一个我创建的 View ，其中主机名、ip 和数据中心来自一个表，ifdesc 和 if stats 来自另一个表。 View 输出如下所示: hostname |
mysql查询左连接+计数
我想要一组来自订单文件的数据，这些数据可以为我提供客户编号、订单编号、产品、数量、价格以及每个订单的订单详细信息文件中的行数。我在最后一部分遇到问题。 Select Header.CustNo, He
sql查询问题/计数
我有属于街道的房子。一个用户可以买几套房子。我如何知道用户是否拥有整条街道？ street table with columns (id/name) house table with columns
Mongodb如何聚合不同值的出现次数(计数)？
我有一套有 200 万个主题标签。然而，只有大约 200k 是不同的值。我想知道哪些主题标签在我的数据中重复得更多。我用它来查找每个主题标签在我的数据集上重复了多少次: db.hashtags.ag
Mongodb同时在多个字段上聚合(计数)
我有如下文件: { "_id" : "someuniqueeventid", "event" : "event_type_1", "date" : ISODate("2014-
使用多重连接的 SQL 计数
我有以下三个相互关联的表: 主持人(有多个 session ) session (有多个进程) 过程表结构如下: 主机表 - id, name session 表 - id, host_id, na
每个类别的 SQL 计数
我需要根据 2 个字段对行进行计数以进行分组。动物(一) id group_id strain_id death_date death_cause status --
从加入组中的 LINQ 计数
我有一个 LINQ 语句，我正在努力改正，所以可能这一切都错了。我的目标是查询一个表并加入另一个表以获取计数。地点标识、显示 ProfilePlaces ID、PlaceID、通话、聆听基本上P
Excel:计数 "Not equal to"
我无法编写 Countifs 来完成我想要的。我每个月都会运行一份 claim 报告，其中包含大量按列组织的数据，并每月将其导出到 Excel 中。在一个单独的选项卡上，我有引用此数据复制到的选项卡的
sql - 根据列值对行进行排名/计数
我有一些数据采用此 sqlfilddle 中描述的格式:http://sqlfiddle.com/#!4/b9cdf/2 基本上，一个包含用户 ID 和事件发生时间的表。我想做的是根据用户发生事件的时
SQL 计数 where 子句
我有以下 SQL 语句: SELECT [l.LeagueId] AS LeagueId, [l.LeagueName] AS NAME, [lp.PositionId] FROM
SQL 平均(计数(*))？
我试图找出一个值在列中出现的平均次数，根据另一列对其进行分组，然后对其进行计算。我有 3 张 table ，有点像这样 DVD ID | NAME 1 | 1 2 | 1 3
SQL - 用 Where 计数
我有一个非常简单的 SQL 问题。我有一个包含以下列的数据库表: 零件号销售类型(为简单起见，称之为销售类型 1、2、3、4、5) 我希望编写一个包含以下三列的查询: 零件号 Sales Type
包含零值的 SQL 计数
我创建了以下存储过程，用于计算选定位置的特定范围之间每天的记录数: [dbo].[getRecordsCount] @LOCATION as INT, @BEGIN as datetime, @END
日期列的 SQL 计数
我有一个包含一组列的表，其中一个是日期列。我需要计算该列的值引用同一个月的次数。如果一个月内，该计数的总和超过 3，则返回。例如: ____________________ | DATE |
XML 计数 TXT
看XXX数据如下: lala XXX = EL String [XXX] | TXT String | MMS String 为此，XXX数据yppz是由 lala

首页

博学

6Ren·AI

商城

javascript - 在莫里斯图栏顶部显示计数？