javascript - onmouseover 工具提示未正确显示

Question

我正在使用 angularjs和谷歌柱形图以图表形式显示数据。当数据更多时，我显示带有水平滚动条的图表。滚动条打开时工具提示出现问题。

请查找演示 here .

当鼠标悬停在条形图上时，它会在工具提示中显示条形图的信息。在上面的演示 plunker 中使用水平滚动条滚动到栏的末尾，然后将鼠标悬停以查看问题，工具提示未正确显示。只有在水平滚动后尝试查看数据时才会发生这种情况。

注意到以下属性的问题:

 focusTarget: 'category'

如果我删除了上述属性，工具提示会正确显示，但我希望在我的应用程序中使用该属性。有什么建议吗？

样本 javascript代码:

angular.module('myApp', ['googlechart'])
  .controller('myController', function($scope) {
    var chart1 = {};
    chart1.type = "ColumnChart";
    chart1.displayed = false;
    chart1.data = {
      "cols": [{
        id: "month",
        label: "Month",
        type: "string"
      }, {
        id: "laptop-id",
        label: "Laptop",
        type: "number"
      }, {
        id: "desktop-id",
        label: "Desktop",
        type: "number"
      }, {
        id: "server-id",
        label: "Server",
        type: "number"
      }, {
        id: "cost-id",
        label: "Shipping",
        type: "number"
      }],
      "rows": [{
        c: [{
          v: "January"
        }, {
          v: 19,
          f: "42 items"
        }, {
          v: 12,
          f: "Ony 12 items"
        }, {
          v: 7,
          f: "7 servers"
        }, {
          v: 4
        }]
      }, {
        c: [{
          v: "February"
        }, {
          v: 13
        }, {
          v: 1,
          f: "1 unit (Out of stock this month)"
        }, {
          v: 12
        }, {
          v: 2
        }]
      }, {
        c: [{
            v: "March"
          }, {
            v: 24
          }, {
            v: 5
          }, {
            v: 11
          }, {
            v: 6
          }

        ]
      }, {
        c: [{
            v: "April"
          }, {
            v: 24
          }, {
            v: 5
          }, {
            v: 11
          }, {
            v: 6
          }

        ]
      }, {
        c: [{
            v: "September"
          }, {
            v: 4
          }, {
            v: 2
          }, {
            v: 51
          }, {
            v: 6
          }

        ]
      }, {
        c: [{
            v: "October"
          }, {
            v: 34
          }, {
            v: 4
          }, {
            v: 0
          }, {
            v: 1
          }

        ]
      }]
    };
    chart1.options = {
      "title": "Sales per month",
      "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
      "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
      "isStacked": "true",
      "fill": 20,
      focusTarget: 'category',
      "displayExactValues": true,
      "vAxis": {
        "title": "Sales unit",
        "gridlines": {
          "count": 10
        }
      },
      "hAxis": {
        "title": "Date"
      },
      "width": chart1.data.rows.length * 130,
      "bar": {
        groupWidth: 40
      }
    };
    chart1.view = {
      columns: [0, 1, 2, 3, 4]
    };
    $scope.myChart = chart1;

    $scope.seriesSelected = function(selectedItem) {
      console.log(selectedItem);
      var col = selectedItem.column;
      if (selectedItem.row === null) {
        console.log($scope.myChart.view.columns[col]);
        if ($scope.myChart.view.columns[col] == col) {
          $scope.myChart.view.columns[col] = {
            label: $scope.myChart.data.cols[col].label,
            type: $scope.myChart.data.cols[col].type,
            calc: function() {
              return null;
            }
          };

          $scope.myChart.options.colors[col - 1] = '#CCCCCC';
        } else {
          console.log("Ran this.");
          $scope.myChart.view.columns[col] = col;
          console.log($scope.myChart.view.columns[col]);
          $scope.myChart.options.colors[col - 1] = $scope.myChart.options.defaultColors[col - 1];
        }
      }
    };
  });

Answer 1

你可以包装你的 <div google-chart chart="myChart">在另一个里面 <div>具有所需的样式。

<div style="width: 60%; overflow-x: auto; overflow-y: hidden;">
    <div google-chart chart="myChart"></div>
</div>

像这样:

(function() {
  /**
   * @description Google Chart Api Directive Module for AngularJS
   * @version 0.0.10
   * @author Nicolas Bouillon <nicolas@bouil.org>
   * @author GitHub contributors
   * @license MIT
   * @year 2013
   */
  (function(document, window, angular) {
    'use strict';

    angular.module('googlechart', [])

      .value('googleChartApiConfig', {
        version: '1',
        optionalSettings: {
          packages: ['corechart']
        }
      })

      .provider('googleJsapiUrl', function() {
        var protocol = 'https:';
        var url = '//www.google.com/jsapi';

        this.setProtocol = function(newProtocol) {
          protocol = newProtocol;
        };

        this.setUrl = function(newUrl) {
          url = newUrl;
        };

        this.$get = function() {
          return (protocol ? protocol : '') + url;
        };
      })
      .factory('googleChartApiPromise', ['$rootScope', '$q', 'googleChartApiConfig', 'googleJsapiUrl', function($rootScope, $q, apiConfig, googleJsapiUrl) {
        var apiReady = $q.defer();
        var onLoad = function() {
          // override callback function
          var settings = {
            callback: function() {
              var oldCb = apiConfig.optionalSettings.callback;
              $rootScope.$apply(function() {
                apiReady.resolve();
              });

              if (angular.isFunction(oldCb)) {
                oldCb.call(this);
              }
            }
          };

          settings = angular.extend({}, apiConfig.optionalSettings, settings);

          window.google.load('visualization', apiConfig.version, settings);
        };
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');

        script.setAttribute('type', 'text/javascript');
        script.src = googleJsapiUrl;

        if (script.addEventListener) { // Standard browsers (including IE9+)
          script.addEventListener('load', onLoad, false);
        } else { // IE8 and below
          script.onreadystatechange = function() {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {
              script.onreadystatechange = null;
              onLoad();
            }
          };
        }

        head.appendChild(script);

        return apiReady.promise;
      }])
      .directive('googleChart', ['$timeout', '$window', '$rootScope', 'googleChartApiPromise', function($timeout, $window, $rootScope, googleChartApiPromise) {
        return {
          restrict: 'A',
          scope: {
            beforeDraw: '&',
            chart: '=chart',
            onReady: '&',
            onSelect: '&',
            select: '&'
          },
          link: function($scope, $elm, $attrs) {
            /* Watches, to refresh the chart when its data, formatters, options, or type change.
                All other values intentionally disregarded to avoid double calls to the draw
                function. Please avoid making changes to these objects directly from this directive.*/
            $scope.$watch(function() {
              if ($scope.chart) {
                return {
                  data: $scope.chart.data,
                  formatters: $scope.chart.formatters,
                  options: $scope.chart.options,
                  type: $scope.chart.type,
                  customFormatters: $scope.chart.customFormatters,
                  view: $scope.chart.view
                };
              }
              return $scope.chart;
            }, function() {
              drawAsync();
            }, true); // true is for deep object equality checking

            // Redraw the chart if the window is resized
            var resizeHandler = $rootScope.$on('resizeMsg', function() {
              $timeout(function() {
                // Not always defined yet in IE so check
                if ($scope.chartWrapper) {
                  drawAsync();
                }
              });
            });

            //Cleanup resize handler.
            $scope.$on('$destroy', function() {
              resizeHandler();
            });

            // Keeps old formatter configuration to compare against
            $scope.oldChartFormatters = {};

            function applyFormat(formatType, formatClass, dataTable) {

              if (typeof($scope.chart.formatters[formatType]) != 'undefined') {
                if (!angular.equals($scope.chart.formatters[formatType], $scope.oldChartFormatters[formatType])) {
                  $scope.oldChartFormatters[formatType] = $scope.chart.formatters[formatType];
                  $scope.formatters[formatType] = [];

                  if (formatType === 'color') {
                    for (var cIdx = 0; cIdx < $scope.chart.formatters[formatType].length; cIdx++) {
                      var colorFormat = new formatClass();

                      for (i = 0; i < $scope.chart.formatters[formatType][cIdx].formats.length; i++) {
                        var data = $scope.chart.formatters[formatType][cIdx].formats[i];

                        if (typeof(data.fromBgColor) != 'undefined' && typeof(data.toBgColor) != 'undefined')
                          colorFormat.addGradientRange(data.from, data.to, data.color, data.fromBgColor, data.toBgColor);
                        else
                          colorFormat.addRange(data.from, data.to, data.color, data.bgcolor);
                      }

                      $scope.formatters[formatType].push(colorFormat);
                    }
                  } else {

                    for (var i = 0; i < $scope.chart.formatters[formatType].length; i++) {
                      $scope.formatters[formatType].push(new formatClass(
                        $scope.chart.formatters[formatType][i]));
                    }
                  }
                }


                //apply formats to dataTable
                for (i = 0; i < $scope.formatters[formatType].length; i++) {
                  if ($scope.chart.formatters[formatType][i].columnNum < dataTable.getNumberOfColumns())
                    $scope.formatters[formatType][i].format(dataTable, $scope.chart.formatters[formatType][i].columnNum);
                }


                //Many formatters require HTML tags to display special formatting
                if (formatType === 'arrow' || formatType === 'bar' || formatType === 'color')
                  $scope.chart.options.allowHtml = true;
              }
            }

            function draw() {
              if (!draw.triggered && ($scope.chart !== undefined)) {
                draw.triggered = true;
                $timeout(function() {

                  if (typeof($scope.chartWrapper) == 'undefined') {
                    var chartWrapperArgs = {
                      chartType: $scope.chart.type,
                      dataTable: $scope.chart.data,
                      view: $scope.chart.view,
                      options: $scope.chart.options,
                      containerId: $elm[0]
                    };

                    $scope.chartWrapper = new google.visualization.ChartWrapper(chartWrapperArgs);
                    google.visualization.events.addListener($scope.chartWrapper, 'ready', function() {
                      $scope.chart.displayed = true;
                      $scope.$apply(function(scope) {
                        scope.onReady({
                          chartWrapper: scope.chartWrapper
                        });
                      });
                    });
                    google.visualization.events.addListener($scope.chartWrapper, 'error', function(err) {
                      console.log("Chart not displayed due to error: " + err.message + ". Full error object follows.");
                      console.log(err);
                    });
                    google.visualization.events.addListener($scope.chartWrapper, 'select', function() {
                      var selectedItem = $scope.chartWrapper.getChart().getSelection()[0];
                      $scope.$apply(function() {
                        if ($attrs.select) {
                          console.log('Angular-Google-Chart: The \'select\' attribute is deprecated and will be removed in a future release.  Please use \'onSelect\'.');
                          $scope.select({
                            selectedItem: selectedItem
                          });
                        } else {
                          $scope.onSelect({
                            selectedItem: selectedItem
                          });
                        }
                      });
                    });
                  } else {
                    $scope.chartWrapper.setChartType($scope.chart.type);
                    $scope.chartWrapper.setDataTable($scope.chart.data);
                    $scope.chartWrapper.setView($scope.chart.view);
                    $scope.chartWrapper.setOptions($scope.chart.options);
                  }

                  if (typeof($scope.formatters) === 'undefined')
                    $scope.formatters = {};

                  if (typeof($scope.chart.formatters) != 'undefined') {
                    applyFormat("number", google.visualization.NumberFormat, $scope.chartWrapper.getDataTable());
                    applyFormat("arrow", google.visualization.ArrowFormat, $scope.chartWrapper.getDataTable());
                    applyFormat("date", google.visualization.DateFormat, $scope.chartWrapper.getDataTable());
                    applyFormat("bar", google.visualization.BarFormat, $scope.chartWrapper.getDataTable());
                    applyFormat("color", google.visualization.ColorFormat, $scope.chartWrapper.getDataTable());
                  }

                  var customFormatters = $scope.chart.customFormatters;
                  if (typeof(customFormatters) != 'undefined') {
                    for (var name in customFormatters) {
                      applyFormat(name, customFormatters[name], $scope.chartWrapper.getDataTable());
                    }
                  }

                  $timeout(function() {
                    $scope.beforeDraw({
                      chartWrapper: $scope.chartWrapper
                    });
                    $scope.chartWrapper.draw();
                    draw.triggered = false;
                  });
                }, 0, true);
              }
            }

            function drawAsync() {
              googleChartApiPromise.then(function() {
                draw();
              });
            }
          }
        };
      }])

      .run(['$rootScope', '$window', function($rootScope, $window) {
        angular.element($window).bind('resize', function() {
          $rootScope.$emit('resizeMsg');
        });
      }]);

  })(document, window, window.angular);





  angular.module('myApp', ['googlechart'])
    .controller('myController', function($scope) {
      var chart1 = {};
      chart1.type = "ColumnChart";
      chart1.displayed = false;
      chart1.data = {
        "cols": [{
          id: "month",
          label: "Month",
          type: "string"
        }, {
          id: "laptop-id",
          label: "Laptop",
          type: "number"
        }, {
          id: "desktop-id",
          label: "Desktop",
          type: "number"
        }, {
          id: "server-id",
          label: "Server",
          type: "number"
        }, {
          id: "cost-id",
          label: "Shipping",
          type: "number"
        }],
        "rows": [{
          c: [{
            v: "January"
          }, {
            v: 19,
            f: "42 items"
          }, {
            v: 12,
            f: "Ony 12 items"
          }, {
            v: 7,
            f: "7 servers"
          }, {
            v: 4
          }]
        }, {
          c: [{
            v: "February"
          }, {
            v: 13
          }, {
            v: 1,
            f: "1 unit (Out of stock this month)"
          }, {
            v: 12
          }, {
            v: 2
          }]
        }, {
          c: [{
              v: "March"
            }, {
              v: 24
            }, {
              v: 5
            }, {
              v: 11
            }, {
              v: 6
            }

          ]
        }, {
          c: [{
              v: "April"
            }, {
              v: 24
            }, {
              v: 5
            }, {
              v: 11
            }, {
              v: 6
            }

          ]
        }, {
          c: [{
              v: "May"
            }, {
              v: 18
            }, {
              v: 11
            }, {
              v: 7
            }, {
              v: 2
            }

          ]
        }, {
          c: [{
              v: "June"
            }, {
              v: 21
            }, {
              v: 5
            }, {
              v: 8
            }, {
              v: 6
            }

          ]
        }, {
          c: [{
              v: "July"
            }, {
              v: 24
            }, {
              v: 5
            }, {
              v: 9
            }, {
              v: 9
            }

          ]
        }, {
          c: [{
              v: "August"
            }, {
              v: 14
            }, {
              v: 1
            }, {
              v: 11
            }, {
              v: 5
            }

          ]
        }, {
          c: [{
              v: "September"
            }, {
              v: 4
            }, {
              v: 2
            }, {
              v: 51
            }, {
              v: 6
            }

          ]
        }, {
          c: [{
              v: "October"
            }, {
              v: 34
            }, {
              v: 4
            }, {
              v: 0
            }, {
              v: 1
            }

          ]
        }]
      };
      chart1.options = {
        "title": "Sales per month",
        "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
        "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
        "isStacked": "true",
        "fill": 20,
        focusTarget: 'category',
        "displayExactValues": true,
        "vAxis": {
          "title": "Sales unit",
          "gridlines": {
            "count": 10
          }
        },
        "hAxis": {
          "title": "Date"
        },
        "width": chart1.data.rows.length * 130,
        "bar": {
          groupWidth: 40
        }
      };
      chart1.view = {
        columns: [0, 1, 2, 3, 4]
      };
      $scope.myChart = chart1;

      $scope.seriesSelected = function(selectedItem) {
        console.log(selectedItem);
        var col = selectedItem.column;
        //If there's no row value, user clicked the legend.
        if (selectedItem.row === null) {
          //If true, the chart series is currently displayed normally.  Hide it.
          console.log($scope.myChart.view.columns[col]);
          if ($scope.myChart.view.columns[col] == col) {
            //Replace the integer value with this object initializer.
            $scope.myChart.view.columns[col] = {
              //Take the label value and type from the existing column.
              label: $scope.myChart.data.cols[col].label,
              type: $scope.myChart.data.cols[col].type,
              //makes the new column a calculated column based on a function that returns null, 
              //effectively hiding the series.
              calc: function() {
                return null;
              }
            };
            //Change the series color to grey to indicate that it is hidden.
            //Uses color[col-1] instead of colors[col] because the domain column (in my case the date values)
            //does not need a color value.
            $scope.myChart.options.colors[col - 1] = '#CCCCCC';
          }
          //series is currently hidden, bring it back.
          else {
            console.log("Ran this.");
            //Simply reassigning the integer column index value removes the calculated column.
            $scope.myChart.view.columns[col] = col;
            console.log($scope.myChart.view.columns[col]);
            //I had the original colors already backed up in another array.  If you want to do this in a more
            //dynamic way (say if the user could change colors for example), then you'd need to have them backed
            //up when you switch to grey.
            $scope.myChart.options.colors[col - 1] = $scope.myChart.options.defaultColors[col - 1];
          }
        }
      };
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<div data-ng-app="myApp">
  <div data-ng-controller="myController">
    <div style="width: 60%; overflow-x: auto; overflow-y: hidden;">
      <div data-google-chart data-chart="myChart"></div>
    </div>
    <br><br>
    <div data-google-chart data-chart="myChart"></div>
  </div>
</div>