Google图表未在x轴上显示完整的十进制前导0

时间:2017-09-04 07:17:49

标签: javascript jquery charts google-visualization

我有一个谷歌图表,显示数据为小数。

我将小数显示为hourminutes。因此,3小时30分钟为330

即使在我的来源中,当我将鼠标悬停在图表上时,我输入的小数点为3.30,它会显示为3.3以及显示为5.10的{​​{1}}

我的来源确认在日期9 / 01,9 / 2上输入了前导0

5.1

当我鼠标移动时,我看到了这个

mouseover google chart #1 mouseover google chart #2

我可以使用代码中的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); 来更改此值,以便显示前导0吗?或者我可以用Javascript或jquery做什么?

1 个答案:

答案 0 :(得分:2)

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

在绘制图表

之前,

格式化数据表列

请参阅以下工作代码段...



export class CustomValidator {
    static checkCheckbox() {
        return (control) => {
            const checkbox = control.get('checkbox');
            const test = control.get('test');
            const testValue = test.value.trim();
            return (!checkbox.value) || (checkbox.value && testValue !== '') ? null : { checkCheckbox: true };
        }; // End of return (control)=>
    } // End of method
} // End of Class

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);
}