javascript - Google 图表未在 x 轴上显示完整的小数前导 0

标签 javascript jquery charts google-visualization

我有一个将数据显示为小数的 Google 图表。

我将小数显示为 hourminutes 。所以 3 小时 30 分钟就是 330

即使在我的源代码中,我输入的小数为 3.30当鼠标悬停在图表上时,它将显示为 3.3以及 5.10显示为5.1

我的消息来源确认在日期 9/01、9/02 输入了前导 0

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    // ticket per day //
    var data = google.visualization.arrayToDataTable([
                                ['Time Tracked Hours', 'Non-Billable Hours', 'Billable Hours'],
                        ['8/29', 0, 0],
                        ['8/30', 0, 0],
                        ['8/31', 0, 0],
                        ['9/01', 3.30, 0],
                        ['9/02', 5.10, 0],
                        ['9/03', 0.05, 0],
                        ['9/04', 0, 0],
                            ]);

    var options = {
        title: '',
        subtitle: 'by ticket status',
        legend: {position: 'bottom'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('columnchart_ticketperday'));

    chart.draw(data, options);

当我将鼠标悬停时,我会看到这个

mouseover google chart #1 mouseover google chart #2

有没有options在我可以用来更改它的代码中,使其显示前导 0?或者我可以用 Javascript 或 jquery 做些什么?

最佳答案

默认情况下,工具提示显示格式化值

在绘制图表之前格式化数据表列

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Time Tracked Hours', 'Non-Billable Hours', 'Billable Hours'],
    ['8/29', 0, 0],
    ['8/30', 0, 0],
    ['8/31', 0, 0],
    ['9/01', 3.30, 0],
    ['9/02', 5.10, 0],
    ['9/03', 0.05, 0],
    ['9/04', 0, 0],
  ]);

  var formatNumber = new google.visualization.NumberFormat({
    pattern: '0.00'
  });
  formatNumber.format(data, 1);
  formatNumber.format(data, 2);

  var options = {
    title: '',
    subtitle: 'by ticket status',
    legend: {position: 'bottom'}
  };

  var chart = new google.visualization.LineChart(document.getElementById('columnchart_ticketperday'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_ticketperday"></div>

关于javascript - Google 图表未在 x 轴上显示完整的小数前导 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46032089/

相关文章:

javascript - 如何使我的条形图动态化

charts - 尽管数据和选项与水平条形图上显示的系列值框相同,但 ZingChart 系列值框未显示

javascript - 在 Android 上从 Web 打印

javascript - 打开一个 DIVS 时关闭所有其他 DIVS

javascript - ReSharper 对于 JavaScript 文件非常慢

javascript - Bootstrap 3 导航折叠不起作用

javascript简单循环计算

javascript - 如何使用带有文本框的模板,其中加载了从 ember.js 中的调用模板传递的数据

javascript - CakePHP 3.8 根据用户选择更改表单数据

charts - 如何在chartjs中将起始值设置为 "0"?