Google 图表 ColumnChart 硬最小轴值溢出标签（仅限 Chrome）

Question

我正在根据 Google 图表 API 构建堆叠柱形图，一切正常 - 大部分情况下。是双y-axis的股票信息。

仅在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() );

希望对您有所帮助

Google 图表 ColumnChart 硬最小轴值溢出标签（仅限 Chrome）

Google Charts ColumnChart hard min axis value overflows label (Chrome only)

javascript

css

charts

google-chrome

google-visualization