使價值出現在圖表上的每個數據點上

我使用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圖表完成這項工作？

來源

2015-11-01 user781486

在這裏，你可以找到所有你需要自定義提示內容https://developers.google.com/chart/interactive/docs/customizing_tooltip_content – Molda

您可以添加另一列（與第二列的值相同），並將此列用作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>

來源

2015-11-02 00:13:54

感謝。你的答案是最有幫助的。註釋角色的相關文檔可以在這裏找到; https://developers.google.com/chart/interactive/docs/roles?hl=zh-CN – user781486

我想用一個不同的方法來處理柱形圖，並使用targetFocus: 'category'。 Check this out

來源

2015-11-01 19:50:48

使價值出現在圖表上的每個數據點上

回答

相關問題