javascript - Google Charts ColumnChart 硬最小轴值溢出标签(仅限 Chrome)

Question

我正在从 Google Charts API 构建一个堆叠的 ColumnChart，一切都很好 - 大部分情况下。它是带有双 y 轴的股票信息。

仅在 chrome 中，当我将 viewWindow 最小值设置为大于 0 以调整图表时，列不会停在图表的底部垂直边界，而是渗入标签.

图表在这里: http://ir.stockpr.com/mainstcapital/stock-information

Chrome :

图表数据全部正确。

代码:

function drawVisualization() {

  var data = google.visualization.arrayToDataTable([
    <?= $chart_data ?>
  ]);

  var options = {
      legend: { position: 'top', textStyle: {color: '#333', fontSize: 10, fontName: 'Arial', bold: false, italic: false} },
      isStacked: true,
      title : 'Historical Dividend, Distributable Net Investment Income (“DNII”), And Net Asset Value (“NAV”) Per Share Growth',
      vAxes: {
        0: {title: "DNII and Dividends Per Share", viewWindowMode: 'explicit', viewWindow: { min: 0.2, max: 1 } }, 
        1: {title: "NAV Per Share", viewWindowMode: 'explicit', viewWindow: { min: 8, max: 24 } }
     },

    hAxis: {title: "As of <?= $last_day_of_last_complete_quarter ?>, <?= $last_complete_year ?>"},

    series: {
        0: {type: "bars", color: '#6d6d66', targetAxisIndex: 0},
        1: {type: "bars", color: '#d4d4d4', targetAxisIndex: 0},

        2: {type: "line", color: 'green', lineWidth: 3, targetAxisIndex: 1},
        3: {type: "line", color: 'red', lineWidth: 3, targetAxisIndex: 0},
    }   

  };

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

我可以做一些 CSS 来解决这个问题吗？我想不通。还是我在 API 中遗漏了什么？感谢您提供任何帮助，在此先感谢您。

Answer 1

由于 url 不正确，未应用由 google.visualization 生成的 svg 的剪辑路径。这是由 head 部分中的 base 标记引起的:

<base href="http://mainstcapital.sites.equisolve.com">

2 种可能的解决方案:

1.删除基本标签

2。添加在此处找到的以下函数:https://code.google.com/p/google-visualization-api-issues/issues/detail?id=598

但它不太可能永远有效:)

function fixGoogleCharts(){

$( 'svg', "#chart_div" ).each( function() {
    $( this ).find( "g" ).each( function() {
        if ($( this ).attr( 'clip-path' )){
            if ( $( this ).attr( 'clip-path' ).indexOf( 'url(#') == -1) return;
            $( this ).attr( 'clip-path', 'url(' + document.location + $( this ).attr( 'clip-path' ).substring( 4 ) )
        }
    });
    $( this ).find( "rect" ).each( function() {
        if($( this ).attr( 'fill' )){
            if ( $( this ).attr( 'fill' ).indexOf( 'url(#') == -1) return;
            $( this ).attr( 'fill', 'url(' + document.location + $( this ).attr( 'fill' ).substring( 4 ) )
        }
    });
}); }

和吼你的

chart.draw(data, options);

添加

google.visualization.events.addListener( chart, 'ready', fixGoogleCharts() );

希望对你有帮助