如何在Ruby on Rails中向Chart JS工具提示添加更多信息?

时间:2020-05-06 16:05:37

标签: javascript ruby-on-rails ruby chart.js

我在Ruby on Rails应用中为图表提供了以下代码:

<div class="col-md-12">
    <div class="card">
        <div class="card-content follower-growth-table table-with-button">
      <div class="chart-container followers-growth-container">
                    <div class="card-header card-header-followers-growth">
        Follower Growth
        <div class='follower-growth-period d-flex justify-content-between align-items-center'><i class="fa fa-calendar-o"></i><p class="calendar-text"><%=@first_date%><%=@last_date%></p></div>
      </div>
      <% unless @graph_data.empty? %>
        <%= line_chart(
           @graph_data,
          height: '300px',
          library: {
            scales: {
              xAxes: [{
                  ticks: {
                  fontColor: 'rgb(174,174,174)'
                  },
                 type: 'time',
            time: {
                unit: 'day',
                stepSize: 1,
            },
                display:true, 
                gridLines: {
                  display: true,
                  drawBorder: true,
                  drawOnChartArea: true,
                }
              }],
              yAxes: [{
                display: true,
                gridLines: {
                  display: true,
                  drawBorder: true, 
                  drawOnChartArea: true,
                },
                ticks: {
                  fontColor: 'rgb(174,174,174)',
            max: @max_followers,
            min: 0,
            stepSize: @graph_step
        }
              }]
            }
          },
          colors: ['rgb(212,203,194)']
        ) %>
      <% else %>
        <%= render partial: 'shared/elements/empty_data_message', locals: {
          message: 'There is no followers data for this influencer yet.'
        } %>
      <% end %>

图形数据变量是一个对象,它以日期作为属性名称,以数字作为值...所以基本上我在Y轴上有数字,在X轴上有日期。目前,工具提示仅向我显示图表上每个点的日期和值。我希望能够添加第三个信息,这是一个来自数组的百分比,每个工具提示的值都不同。到目前为止,我没有尝试过任何方法,或者到目前为止,我一直在网上寻找其他解决方案对我没有用。如果有人有任何想法,我将不胜感激。

0 个答案:

没有答案
相关问题