如何在饼图chartJS中将工具提示格式化为货币?

艾玛奴

我在我的Rails应用程序中使用chartJS,并且下面添加了我的图表代码。将鼠标悬停在各个部分上时,我需要显示为“标签名称:$ 636” ...现在,将鼠标悬停在它上时,其显示为“标签名称:636”。当前带有工具提示的图表是在此处输入图片说明

var ctx = document.getElementById('dollar-issue-area').getContext('2d');
var that = this;
this.chart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: <%= raw dollar_per_type.collect { |k, v| k } %>,
        datasets: [{
            label: 'Number of tickets',
            data: <%= raw dollar_per_type.collect { |k, v| v } %>,
            backgroundColor: palette('tol-dv', <%= raw dollar_per_type.collect { |k, v| k }.length %>).map(function(hex) {return '#' + hex;})
        }]
    },
    options: {
        title:{
            display: true,
            text: 'Dollar per Sub Issue Type from <%= start_date %> to <%= end_date %>'
        },
        legend: {
            display: true,
            labels: {
                display: false,
                fontSize: 10
            }
        }
    }
});
白帽

您可以使用工具提示回调函数

在这里,label回调用于自定义工具提示内容...

    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data['labels'][tooltipItem['index']] + ': $' + data['datasets'][0]['data'][tooltipItem['index']];
        }
      }
    }

请参阅以下工作片段...

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['confirmed', 'pending'],
    datasets: [{
      data: [67, 33],
      backgroundColor: [
        'rgba(41, 121, 255, 1)',
        'rgba(38, 198, 218, 1)'
      ],
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Dollar per Sub Issue Type'
    },
    legend: {
      display: true,
      labels: {
        display: false,
        fontSize: 10
      }
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data['labels'][tooltipItem['index']] + ': $' + data['datasets'][0]['data'][tooltipItem['index']];
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Python中将数字格式化为货币

ChartJS 版本 3 如何向饼图工具提示添加百分比

ECharts / JS-在工具提示中将时间Int格式化为H:M:S

我如何在lua中将时间格式化为秒?

如何在Go中将时间戳格式化为GMT?

如何在Java中将输出格式化为表格?

如何在Moment中将数字格式化为时间?

如何在Haskell中将UTCTime格式化为ISO 8601

如何在JasperSoft Studio中将数字格式化为2.564.894.621?

如何在Flutter中将数字格式化为指数形式

如何在JavaScript中将文本格式化为多行

在python中将数字或字符串格式化为货币

在Swift中将负Double格式化为货币

饼图的Kendo货币格式

如何在丢失焦点的角度4上将输入文本值格式化为货币?

如何在 PHP 中将日期时间从可读格式化为可格式化

如何将ClosedXML中的货币格式化为数字

如何在不使用任何CSS的情况下透明解决饼形图工具提示?

如何在 SQL 中将所选日期列格式化为相对时间格式

如何在xsl中将数字格式化为日期时间格式?

如何在Java,Android中将SQL日期格式化为简单日期格式?

如何在熊猫中将数组格式化为特定的数据帧格式?

如何在 Java 中将日期格式化为带有缩写时区的格式?

如何在 Python 中将数组元素格式化为 Latex 格式为标题/标签?

在jasper报告中将字符串格式化为货币格式

在ReportViewer中将文本框的表达式格式化为货币格式

在公式中格式化为货币

将bin标签格式化为货币

将数字格式化为货币android