Question

我目前正在使用谷歌图表API进行图表处理，但我努力做出两次正面的水平刻度。例如：50 25 0 25 50，堆积的图表栏以刻度中的“0”为中心。我有点使用“虚拟”隐形条来推动所有内容，但我无法找到一种方法来自定义水平轴标签，而无需编辑windowsview。

这是我的实际代码：

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

function findMax(arr) {
    var max = 0;
    for (var n in arr) {
    if (n > 0) {
        var cMax = arr[n][2];
      if (cMax > max)
        max = cMax
    }
  }
  return (max);
}

function findLine(arr) {
    var max = 0;
    for (var n in arr) {
    if (n > 0) {
        var cMax = arr[n][2] + arr[n][3] + arr[n][4];
      if (cMax > max)
        max = cMax
    }
  }
  return (max / 2);
}

function space(arr, maxL) {
  var max = findMax(arr);
  for (var n in arr) {
    if (n > 0) {
        arr[n][1] = max - arr[n][2] + (maxL);
    }
  }
}

function drawAnnotations() {
    var raw_data = [];
    raw_data.push( ['Compétence', 'invisible', 'Expert', 'Certifié', 'Non certifié'] );
    raw_data.push( ['Java', 0, 24, 31, 12] );
    raw_data.push( ['PHP', 0, 17, 22, 10] );
    raw_data.push( ['JavaScript', 0, 6, 10, 22] );
    raw_data.push( ['Cpp', 0, 0, 0, 50] );
    raw_data.push( ['C#', 0, 5, 10, 15] );

    var maxL = findLine(raw_data);
    space(raw_data, maxL);
    var data = google.visualization.arrayToDataTable(raw_data);

    var options = {
      isStacked: true,
      enableInteractivity: false,
      width: 600, height: 400,
      legend : 'none',
      bar: { groupWidth: '85%' },
      colors: ['ffffff','gray', 'yellow', 'red'], 
      hAxis: {
        title: '',
        baselineColor: '#fff',
        gridlineColor: '#fff'
      },
      vAxis: {
        title: '',
        baselineColor: '#fff',
        gridlineColor: '#fff'
      }
    };
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

JSfiddle Link

目前我得到了我想要的水平刻度，而不是我希望的那样。（我尝试使用多个轴，但事实证明它是不成功的。）

编辑：我添加link to an image我希望做的图表（比例尺）。

更新

我现在有点工作了：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <meta charset=utf-8 />

    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawAnnotations);

      function drawAnnotations() {
        var raw_data = [];
        raw_data.push( ['Compétence', 'Expert', 'Certifié', 'Non certifié'] );
        raw_data.push( ['Java', -24, 45, 12] );
        raw_data.push( ['PHP', -17, 22, 10] );
        raw_data.push( ['JavaScript', -6, 10, 22] );
        raw_data.push( ['Cpp', -0, 0, 50] );
        raw_data.push( ['C#', -5, 10, 15] );
        var data = google.visualization.arrayToDataTable(raw_data);

        var options = {
          isStacked: true,
          width: $(window).width() * 0.8, height: 400,
          legend : 'none',
          bar: { groupWidth: '85%' },
          colors: ['gray', 'yellow', 'red'], 
          interpolateNulls: true,
          hAxis: {
            title: 'Number',
            gridlines: {
              color: 'transparent'
            }
          }
        };
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

      $(window).load(function() {
          $('text').each(function(i, el) {
            if ($(this).text()[0] == '-')
             $(this).text($(this).text().substr(1));
          });
      });
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

我不得不改变我正在使用的谷歌库：

先前是：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

现在我正在使用：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

我不确定为什么它改变了一些东西但没有这个改变$（窗口）.load无法达到“文本”而我无法编辑它。现在我只是将我的图表的一部分转换为负数（我想在左边的那个）并使用jquery从比例中更改“负”值。

只剩下一件事，当您指向图表的“灰色”区域时，工具提示仍会显示负值。

我仍然希望它可以帮助那些为这个特殊问题而斗争的人。

Answer 1

事实上，不是通过jQuery修改轴文本，而是可以通过ticks功能对其进行自定义，如下所示：

hAxis: {
            ticks: [{ v: -25, f: '25' }, 0, 25, 50, 75]
       }

重新定制自定义工具提示标签，您可以考虑以下解决方案来显示非负值：

1）将onmouseover事件附加到Google Chart：

google.visualization.events.addListener(chart, 'onmouseover', function (e) {
    setTooltipContent(data, e);
});

2）覆盖工具提示负值：

function setTooltipContent(data, e) {
    if (e.row != null && e.column == 1) {
        var val = Math.abs(data.getValue(e.row, 1));
        var tooltipTextLabel = $(".google-visualization-tooltip-item-list li:eq(1) span:eq(1)");
        tooltipTextLabel.text(val.toString());
    }
}

完整示例

＆＃13;

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawAnnotations);

function drawAnnotations() {
    var raw_data = [];
    raw_data.push(['Compétence', 'Expert', 'Certifié', 'Non certifié']);
    raw_data.push(['Java', -24, 45, 12]);
    raw_data.push(['PHP', -17, 22, 10]);
    raw_data.push(['JavaScript', -6, 10, 22]);
    raw_data.push(['Cpp', -0, 0, 50]);
    raw_data.push(['C#', -5, 10, 15]);
    var data = google.visualization.arrayToDataTable(raw_data);
    
   
    var options = {
        isStacked: true,
        width: $(window).width() * 0.8, height: 400,
        legend: 'none',
        bar: { groupWidth: '85%' },
        colors: ['gray', 'yellow', 'red'],
        interpolateNulls: true,
        tooltip: {isHtml: true},
        hAxis: {
            title: 'Number',
            gridlines: {
                color: 'transparent'
            },
            ticks: [{ v: -25, f: '25' }, 0, 25, 50, 75]
    }
    };
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'onmouseover', function (e) {
        setTooltipContent(data, e);
    });
}

function setTooltipContent(data, e) {
    if (e.row != null && e.column == 1) {
        var val = Math.abs(data.getValue(e.row, 1));
        var tooltipTextLabel = $(".google-visualization-tooltip-item-list li:eq(1) span:eq(1)");
        tooltipTextLabel.text(val.toString());
    }
}

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

＆＃13;

JSFiddle

谷歌图表叠加条形图两个正面规模

更新

1 个答案: