时间戳

首页 > 解决方案 > 谷歌可视化百分比问题

javascript - 谷歌可视化百分比问题

问题描述

我无法在 jsfiddle 中重新创建它，所以这就是我所能提供的。我希望有人能与我联系，因为我还是个新手，并且制作此代码的人已经从 covid 去世了。 https://imgur.com/a/4ewvXsC

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

function load_monthwise_data(pos, title)
{
    var temp_title = title + ' '+pos+'';
    $.ajax({
        url:"fetch.php",
        method:"POST",
        data:{pos:pos},
        dataType:"JSON",
        success:function(data)
        {
            drawMonthwiseChart(data, temp_title);
        }
    });
function drawMonthwiseChart(chart_data, chart_main_title)
{
    var jsonData = chart_data;
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Nama Calon');
    data.addColumn('number', 'Jumlah Undian');
    $.each(jsonData, function(i, jsonData){
        var name = jsonData.name;
        var total = parseFloat($.trim(jsonData.total));
        data.addRows([[name, total]]);
    });
    var options = {
        title:chart_main_title,
        hAxis: {
            title: "Nama Calon"
        },
        vAxis: { 
            title: 'Jumlah Undian', 
            format: '#%'
        }
    };

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

百分比值超过 100% 并且百分比与总值相关

标签： javascriptchartsgoogle-visualization

解决方案

提供一些帮助有点困难，但我会努力的。您将在下面找到描述使用 google 虚拟化 api 和一些用例的链接。

这是我的推测，但看起来条形图值正在动态设置条形大小或长度。因此，如果您有大量数据，则该条的大小会分别更大。

function drawMonthwiseChart(chart_data, chart_main_title){
  var j = 0;
  var jsonData = chart_data;
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nama Calon');
  data.addColumn('number', 'Jumlah Undian');
  $.each(jsonData, function(i, jsonData){
    var name = jsonData.name;
    // looks like the issue's coming from here (the total value)
    //var total = parseFloat($.trim(jsonData.total));
    //data.addRows([[name, total]]);
   // Use this, if the total is less than or equal to 100 append data
     var total = parseFloat($.trim(jsonData.total));
     j += 1; // looks like it's counting the number of instead of percentages
     if(j <= 100){
       data.addRows([[name, total]]);
     }
  });
  var options = {
    title:chart_main_title,
      hAxis: {
        title: "Nama Calon"
      },
      vAxis: { 
        title: 'Jumlah Undian', 
        format: '#%'
      }
  };

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

UPDATE看起来像是循环，记录（数据）的数量正在设置图表大小。

资源：

推荐阅读