Javascript 如何将轴标签与google bubble chart中图表区域外的扩展主网格线对齐

我正在使用谷歌可视化气泡图，我需要对齐垂直轴标签，如下所示，我想对齐标签到图表的边缘，而不是轴线，还需要2条线，并将主网格线延伸到图表区域之外。

代码如下：

<div data-ng-app="mainApp" data-ng-controller="mainSearchController"
     ng-init="ShowChart()">
    <div class="row" ng-mouseover="mousepoints($event)">
        <div google-chart chart="saleChart"
             agc-on-mouseover="showTooltip(row)"
             agc-on-mouseout="hideTooltip()">
        </div>
        <div id="custom_tooltip"
             style="position:fixed; border:0px solid #777777;
                    padding-left:10px; line-height:15px; color:#5f5f5f;
                    font-family:Arial; background-color:#FFFFFF;
                    height:auto; width:auto; font-size:10px;">
        </div>
    </div>
</div>

下面是用于绑定图表的angularjs代码

var app = angular.module('mainApp', ['googlechart']);

app.controller('mainSearchController', function ($scope) {
    
    $scope.ShowChart = function () {     
        var saleChart = {};
        saleChart.type = 'BubbleChart';
        saleChart.cssStyle = "height:100%; width:100%;";
        var options = {
            sizeAxis: {
                maxSize: 7,
                minSize: 1
            },
            fontSize:10,
            legend: 'none',
            height: 200,
            width: 400,
            bubble: { stroke: '#fdca0f', opacity: 1 },
            colors: ['#fdca0f', '#fdca0f'],
            tooltip: {
                trigger: 'none'
            },
            hAxis: {
                ticks: [
                    { v: 800, f: '2015' },
                    { v: 1200, f: '2016' },
                    { v: 1600, f: '2017' },
                    { v: 2000, f: '2018' },
                    { v: 2400, f: '2019' },
                    { v: 2800, f: '2020' }
                ],
                gridlines: { color: '#dedede' },
                minorGridlines: { color: '#f7f7f7', count: 3 },
                textStyle: { color: '#5f5f5f' }    
            },
            vAxis: {
                ticks: [
                    { v: 1, f: 'Chennai in March' },
                    { v: 2, f: 'Mumbai in March' },
                    { v: 3, f: 'Delhi in April' },
                    { v: 4, f: 'Chennai in April' }
                    
                ],
                gridlines: { color: '#dedede' },
                textStyle: { color: '#5f5f5f' }
            }
        };
            
        var d = [
          ["Name", "Year", "Place", "", "Sales", "tooltip"],
          ["", 1000, 2, "", 26, "Sale List"],
          ["",1200,3,"",28,"Sale List"],
          ["",1400,3,"",48,"S"],
          ["",1600,3,"",29,"S"]
        ];
        saleChart.data = d;
        $scope.chartData = d;
        saleChart.options = options;
        $scope.saleChart = saleChart;        
        
    }

    var mouseX;
    var mouseY;
    $scope.mousepoints = function (e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }

    $scope.showTooltip = function (row) {    
        var x = mouseX;
        var y = mouseY + 10;        
        if (row != null) {        
            dataTable = google.visualization.arrayToDataTable($scope.chartData);
            var v = dataTable.getValue(row, 5);
            //var v = $scope.chartData.rows[row][5];
            v = v.toString().replace(/,/g, "<br/>")

            $('#custom_tooltip').html('<div>' + v + '</div>').css({
                'top': y,
                'left': x
            }).fadeIn('slow');
        }
    }
    $scope.hideTooltip = function () {
        $('#custom_tooltip').fadeOut('fast');
    }
});

var-app=angular.module（'mainApp'，['googlechart']）；
app.controller（'mainSearchController'，函数（$scope）{
$scope.ShowChart=函数（）{
var saleChart={}；
saleChart.type='BubbleChart'；
saleChart.cssStyle=“高度：100%；宽度：100%；”；
变量选项={
大小轴：{
最大尺寸：7，
minSize:1
},
尺寸：10，
图例：“无”，
身高：200，
宽度：400，
气泡：{笔划：'#fdca0f'，不透明度：1}，
颜色：['#fdca0f'，'#fdca0f']，
工具提示：{
触发器：“无”
},
哈克斯：{
滴答声：[
{v:800，f:'2015'}，
{v:1200，f:'2016'}，
{v:1600，f:'2017'}，
{v:2000，f:'2018'}，
{v:2400，f:'2019'}，
{v:2800，f:'2020'}
],
网格线：{color:'#dedede'}，
minorGridlines:{颜色：'#f7f7f7'，计数：3}，
文本样式：{color:'#5F5F'}
},
言辞：{
滴答声：[
{v:1，f:'金奈三月'}，
{v:2，f:'三月的孟买'}，
{v:3，f:'四月的德里'}，
{v:4，f:'金奈四月'}
],
网格线：{color:'#dedede'}，
文本样式：{color:'#5F5F'}
}
};
变量d=[
[“名称”、“年份”、“地点”、“销售”、“工具提示”]，
[“”，1000，2，”，26，“销售清单”]，
[“”，1200,3，”，28，“销售清单”]，
[1400,3,48,S]，
[“”，1600,3，”，29，“S”]
];
saleChart.data=d；
$scope.chartData=d；
saleChart.options=选项；
$scope.saleChart=saleChart；
}
var mouseX；
var mouseY；
$scope.mousepoints=函数（e）{
mouseX=e.pageX；
mouseY=e.pageY；
}
$scope.showTooltip=函数（行）{
var x=鼠标；
变量y=mouseY+10；
如果（行！=null）{
dataTable=google.visualization.arrayToDataTable（$scope.chartData）；
var v=dataTable.getValue（第5行）；
//var v=$scope.chartData.rows[row][5]；
v=v.toString（）.替换（/，/g，“
”）
$（'#自定义工具提示'）.html（''+v+''）.css({
“顶部”：y，
“左”：x
}).fadeIn（“慢”）；
}
}
$scope.hideTooltip=函数（）{
$（“#自定义工具提示”）.fadeOut（'fast'）；
}
});

谷歌图表使用剪辑路径附加可视图形。您可以使用

元素上的

cx

（水平轴）、

cy

（垂直轴）和

r

（半径）属性来控制此操作。 由于每一行都将（或必须）具有相同的高度，您只需添加一些js即可使

cy=cy-10（或使圆圈显示在您想要的位置的任何数字）

但是这里还有另一个问题，你不能在上轴或下轴上设置圆。当然，你可以，但它将是画布的一半。在这一点上，我认为没有太多的事情要做，不能在这个元素上使用z-index css属性，因此你可能无法达到所需的方法。
请求的更改只能可以通过手动修改图表的SVG来实现，

这可以在图表的
'ready'
事件上完成

首先，将就绪事件添加到
元素中



然后将侦听器添加到控制器

要向下移动标签，请查找
元素，

并更改其
'y'
属性

至于网格线（
），我们需要更改
'x'
属性，以及
'width'


不仅在网格线上，而且在包含网格线的
元素上

// ready event
$scope.onReady = function (chartWrapper) {
  // find, move labels
  var labels = chartWrapper.getChart().getContainer().getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
    if (label.getAttribute('text-anchor') === 'end') {
      var yLabel = parseFloat(label.getAttribute('y')) + (parseFloat(label.getAttribute('font-size')) * 2);
      label.setAttribute('y', yLabel);
    }
  });

  // find, expand grid lines
  var gridLines = chartWrapper.getChart().getContainer().getElementsByTagName('rect');
  Array.prototype.forEach.call(gridLines, function(line) {
    if ((line.getAttribute('height') === '1') ||
        ((line.getAttribute('x') !== '0') &&
        ((line.getAttribute('fill') === null) || (line.getAttribute('fill') === '#ffffff')))) {
      var lineWidth = parseFloat(line.getAttribute('width')) + parseFloat(line.getAttribute('x')) - 2;
      line.setAttribute('x', 2);
      line.setAttribute('width', lineWidth);
    }
  });
}

请参阅以下工作片段


var-app=angular.module（'mainApp'，['googlechart']）；
app.controller（'mainSearchController'，函数（$scope）{
$scope.ShowChart=函数（）{
var saleChart={}；
saleChart.type='BubbleChart'；
saleChart.cssStyle=“高度：100%；宽度：100%；”；
变量选项={
大小轴：{
最大尺寸：7，
minSize:1
},
尺寸：10，
图例：“无”，
身高：200，
宽度：400，
气泡：{笔划：'#fdca0f'，不透明度：1}，
颜色：['#fdca0f'，'#fdca0f']，
工具提示：{
触发器：“无”
},
哈克斯：{
滴答声：[
{v:800，f:'2015'}，
{v:1200，f:'2016'}，
{v:1600，f:'2017'}，
{v:2000，f:'2018'}，
{v:2400，f:'2019'}，
{v:2800，f:'2020'}
],
网格线：{color:'#dedede'}，
minorGridlines:{颜色：'#f7f7f7'，计数：3}，
文本样式：{color:'#5F5F'}
},
言辞：{
滴答声：[
//添加换行符-->\n
{v:1，f: