让价值出现在图表上的每个数据点上

Question

我有一个 plunker，它使用 AngularJS Google 图表创建了一个只有 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],

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

如何使用 Google 图表完成此操作（如果可能）？

Answer 1

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

Answer 2

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

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

<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
    
    <script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<div ng-app='myApp'><div ng-controller="MainCtrl">
  <div style="float:right;position:relative;z-index:100;background:#f1f1f1;padding-top:40px">
  <p>
    Software: <input type=range min=10000 max=100000 value={{aa}} ng-model="aa" ng-change="chart.data[1][1]=1*aa;chart.data[1][2]=1*aa"> {{aa}}
  </p>
  <p>
    Hardware: <input type=range min=10000 max=100000 value={{bb}} ng-model="bb" ng-change="chart.data[2][1]=1*bb;chart.data[2][2]=1*bb">{{bb}}
  </p>
  <p>
    Services: <input type=range min=10000 max=100000 value={{cc}} ng-model="cc" ng-change="chart.data[3][1]=1*cc;chart.data[3][2]=1*cc">{{cc}}
  </p>
                                                                                                                                       </div>
  <div google-chart chart="chart">
  </div>

</div></div>

让价值出现在图表上的每个数据点上

Make value appear on every data point on chart

javascript

google-visualization

angularjs