如何在 google 图表的工具提示中添加小数点和 Lacs？

Question

我正在使用 google chart.I 根据我的数据创建了一个图表。现在我想修改我的工具提示。有两点我想修改。

每个包含单词 Lacs 的数据都保留 1 个小数点。假设我有像 31.221 这样的数据（来自我的图片）。我想让它显示 31.2 Lacs。

我该怎么做？如果有人对此有任何想法，请与我分享。

我的代码是：

HTML:

<div id="chart_div" style="height: 400px; margin: 0 auto"></div>

脚本：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLogScales);

function drawLogScales() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'X');
      data.addColumn('number', 'ELSS 13%');
      data.addColumn('number', 'ULIP 9%');
      data.addColumn('number', 'SSY 8.6%');
      data.addColumn('number', 'PPF 8.1%');
      data.addColumn('number', 'LIC 6%');
      data.addColumn('number', 'NSC 5.95%');
      data.addColumn('number', 'TD 5.95%');
      data.addColumn('number', 'FD 5.5%');

      data.addRows([
        ["0",0,0,0,0,0,0,0,0],["2016",1.695,1.635,1.629,1.6215,1.59,1.58925,1.58925,1.5825], ["2017", 3.61035, 3.41715,3.398094,3.3743415,3.2754,3.273060375,3.273060375, 3.2520375], ["2018", 5.7746955, 5.3596935,5.319330084,5.269163162, 5.061924,    5.057057467, 5.057057467, 5.013399563],  ["2019", 8.220405915, 7.477065915,7.405792471,7.317465378,    6.95563944,  6.947202387, 6.947202387, 6.871636538],  ["2020", 10.98405868, 9.785001847,9.671690624,9.531680073,    8.962977806, 8.949810929, 8.949810929, 8.832076548], ["2021", 14.10698631, 12.30065201,12.13245602,11.92524616, 11.09075647, 11.07157468, 11.07157468, 10.90034076], ["2022", 17.63589453, 15.04271069,14.80484723,14.5126911,  13.34620186, 13.31958337, 13.31958337, 13.0823595], ["2023", 21.62356082, 18.03155466,17.7070641,17.30971908,   15.73697398, 15.70134858, 15.70134858, 15.38438927], ["2024", 26.12962373, 21.28939458,20.85887161,20.33330632, 18.27119241, 18.22482882, 18.22482882, 17.81303068], ["2025", 31.22147481, 24.84044009,24.28173457,23.60180413, 20.95746396, 20.89845614, 20.89845614, 20.37524737], ["2026", 36.97526654, 28.7110797,27.99896374,27.13505027,  23.8049118,  23.73116428, 23.73116428, 23.07838598], ["2027", 43.47705119, 32.93007687,32.03587462,30.95448934, 26.8232065,  26.73241855, 26.73241855, 25.9301972], ["2028", 50.82406785, 37.52878379,36.41995984,35.08330298,  30.02259889, 29.91224746, 29.91224746, 28.93885805], ["2029", 59.12619667, 42.54137433,41.18107639,39.54655052, 33.41395483, 33.28127618, 33.28127618, 32.11299524], ["2030", 68.50760223, 48.00509802,46.35164896,44.37132111, 37.00879212, 36.85076211, 36.85076211, 35.46170998]
      ]);


      var options = {
        'title' : 'Accumulation of Rs. 150000 invested every year in 80C instruments',
        colors: ['#F69688', '#A8423F', '#86A44A','#6E548D','#3D96AE','#DA8137','#403152','#CE8E8D'],
        backgroundColor: 'transparent',
        hAxis: {
          title: 'Years',
          logScale: true
        },
        vAxis: {
          title: 'Accumulated amounts (in lakhs)',
          logScale: false,
          gridlines: { color: 'transparent' }
        }     

      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
   </script>

Answer 1

您可以创建自定义工具提示，如下所示：

    dataTable.addColumn({type: 'string', role: 'tooltip'});
    dataTable.addRows([
      ['2010', 600,'0K in our first year!'],
      ['2011', 1500, 'Sunspot activity made this our best year ever!'],
      ['2012', 800, '0K in 2012.'],
      ['2013', 1000, 'M in sales last year.']
    ]);

    var options = { legend: 'none' };
    var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
    chart.draw(dataTable, options);

更多详情： https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-tooltip-content

Answer 2

您可以使用NumberFormat格式化数据

// create formatter
var formatter = new google.visualization.NumberFormat({
  pattern: '0.0',
  suffix: ' Lacs'
});

// format number columns
for (var i = 1; i < data.getNumberOfColumns(); i++) {
  formatter.format(data, i);
}

然后显示在工具提示中

参见以下示例...

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

function drawLogScales() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'X');
  data.addColumn('number', 'ELSS 13%');
  data.addColumn('number', 'ULIP 9%');
  data.addColumn('number', 'SSY 8.6%');
  data.addColumn('number', 'PPF 8.1%');
  data.addColumn('number', 'LIC 6%');
  data.addColumn('number', 'NSC 5.95%');
  data.addColumn('number', 'TD 5.95%');
  data.addColumn('number', 'FD 5.5%');

  data.addRows([
    ["0",0,0,0,0,0,0,0,0],["2016",1.695,1.635,1.629,1.6215,1.59,1.58925,1.58925,1.5825], ["2017", 3.61035, 3.41715,3.398094,3.3743415,3.2754,3.273060375,3.273060375, 3.2520375], ["2018", 5.7746955, 5.3596935,5.319330084,5.269163162, 5.061924,    5.057057467, 5.057057467, 5.013399563],  ["2019", 8.220405915, 7.477065915,7.405792471,7.317465378,    6.95563944,  6.947202387, 6.947202387, 6.871636538],  ["2020", 10.98405868, 9.785001847,9.671690624,9.531680073,    8.962977806, 8.949810929, 8.949810929, 8.832076548], ["2021", 14.10698631, 12.30065201,12.13245602,11.92524616, 11.09075647, 11.07157468, 11.07157468, 10.90034076], ["2022", 17.63589453, 15.04271069,14.80484723,14.5126911,  13.34620186, 13.31958337, 13.31958337, 13.0823595], ["2023", 21.62356082, 18.03155466,17.7070641,17.30971908,   15.73697398, 15.70134858, 15.70134858, 15.38438927], ["2024", 26.12962373, 21.28939458,20.85887161,20.33330632, 18.27119241, 18.22482882, 18.22482882, 17.81303068], ["2025", 31.22147481, 24.84044009,24.28173457,23.60180413, 20.95746396, 20.89845614, 20.89845614, 20.37524737], ["2026", 36.97526654, 28.7110797,27.99896374,27.13505027,  23.8049118,  23.73116428, 23.73116428, 23.07838598], ["2027", 43.47705119, 32.93007687,32.03587462,30.95448934, 26.8232065,  26.73241855, 26.73241855, 25.9301972], ["2028", 50.82406785, 37.52878379,36.41995984,35.08330298,  30.02259889, 29.91224746, 29.91224746, 28.93885805], ["2029", 59.12619667, 42.54137433,41.18107639,39.54655052, 33.41395483, 33.28127618, 33.28127618, 32.11299524], ["2030", 68.50760223, 48.00509802,46.35164896,44.37132111, 37.00879212, 36.85076211, 36.85076211, 35.46170998]
  ]);

  // create formatter
  var formatter = new google.visualization.NumberFormat({
    pattern: '0.0',
    suffix: ' Lacs'
  });

  // format number columns
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    formatter.format(data, i);
  }

  var options = {
    title : 'Accumulation of Rs. 150000 invested every year in 80C instruments',
    titleTextStyle: {
      fontSize: 20
    },
    colors: ['#F69688', '#A8423F', '#86A44A','#6E548D','#3D96AE','#DA8137','#403152','#CE8E8D'],
    backgroundColor: 'transparent',
    hAxis: {
      title: 'Years',
      logScale: true
    },
    vAxis: {
      title: 'Accumulated amounts (in lakhs)',
      logScale: false,
      gridlines: { color: 'transparent' }
    }

  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="height: 400px; margin: 0 auto"></div>

如何在 google 图表的工具提示中添加小数点和 Lacs？

How to add decimal point and Lacs inside tooltip in a google chart?

javascript

jquery

charts

google-visualization

pygooglechart