Question

我正在使用Google Charts API构建一个堆叠的ColumnChart，而且一切都很好 - 主要是。它是具有双y轴的股票信息。

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

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

铬： enter image description here

图表数据都是正确的。

代码：

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);
}

我能解决这个问题吗？我无法想象任何事情。或者我错过了API中的某些内容？如有任何帮助，请提前感谢。

Answer 1

由于网址不正确，因此不会应用google.visualization生成的svg的剪辑路径。这是由头部分中的基本标记引起的：

<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 Charts ColumnChart硬质最小轴值溢出标签（仅限Chrome）

1 个答案: