Question

我有这个使用AngularJS Google Chart创建一个只有3个数据点的简单折线图。 http://plnkr.co/edit/K6nX4Ilgexq9OWkVSPwf?p=preview

app.controller('MainCtrl', function($scope) {
  var chart1 = {};
  chart1.type = "LineChart";
  chart1.data = [
    ['Component', 'cost'],
    ['Software', 50000],
    ['Hardware', 80000],

当您移动鼠标以触摸数据点时，会出现一个窗口并显示该项目的成本。我希望所有数据点的成本始终显示在图表上。它不会阻塞图表，因为只有3个数据点。

如果可能，如何使用Google Chart完成此操作？

Answer 1

我会使用柱形图制作不同的方法，并使用targetFocus: 'category'。 Check this out

Answer 2

您可以添加另一列（与第二列具有相同的值），并将此列用作ccc ddd。 http://plnkr.co/edit/luSgUPmbhPbSFZ4Z7CRz?p=preview

annotation

// Code goes here

var app = angular.module('myApp', ['googlechart']);

app.controller('MainCtrl', function($scope) {
  var chart1 = {};
  chart1.type = "LineChart";
  chart1.data = [
    ['Component', 'cost',{type:'number',role:'annotation'}],
    ['Software', 50000,50000],
    ['Hardware', 80000,80000],

  ];
  chart1.data.push(['Services', 20000,20000]);
  chart1.options = {
    displayExactValues: true,
    width: 300,
    height: 150,
    is3D: true,
    chartArea: {
      left: 10,
      top: 10,
      bottom: 0,
      height: "100%"
    },
    explorer: {
      actions: ['dragToZoom', 'rightClickToReset']
    }
  };

  chart1.formatters = {
    number: [{
      columnNum: 1,
      pattern: "$ #,##0.00"
    },{
      columnNum: 2,
      pattern: "$ #,##0.00"
    }]
  };

  $scope.chart = chart1;

  $scope.aa = 1 * $scope.chart.data[1][1];
  $scope.bb = 1 * $scope.chart.data[2][1];
  $scope.cc = 1 * $scope.chart.data[3][1];
});

使值显示在图表上的每个数据点上

2 个答案: