2017-08-09 75 views
1

以下是我的json對象的代碼。我想使某些行破滅。誰能告訴我如何使用確定性角色?我嘗試在「cols」下的「p」屬性中添加角色:'certainty',然後在行中定義「p」:false/true,但那不起作用。我想我無法在這裏使用正確的語法。如何使用帶有json對象的谷歌圖表製作虛線

 $scope.chartObject1 = { 
       "type": "LineChart", 
       "displayed": false, 
       "data": { 
        "cols": [ 
        { 
         "id": "month", 
         "label": "Month", 
         "type": "string", 
         "p": {} 
        }, 
        { 
         "id": "Net", 
         "label": "Net", 
         "type": "number", 
         "p": {} 
        }, 
        { 
         "id": "Eg", 
         "label": "EG", 
         "type": "number", 
         "p": {} 
        }, 
        { 
         "id": "Sg", 
         "label": "SG", 
         "type": "number", 
         "p": {} 
        }, 
        { 
         "id": "CL", 
         "label": "CL", 
         "type": "number", 
         "p": {} 
        } 
        ], 
        "rows": [ 
        { 
         "c": [ 
         { 
          "v": $scope.MonthGraph[7] 
         }, 
         { 
          "v": $scope.netRev[7], 
          "f": $scope.formatshort($scope.netRev[7]) 
         }, 
         { 
          "v": $scope.egRev[7], 
          "f": $scope.formatshort($scope.egRev[7]) 
         }, 
         { 
          "v": $scope.sgRev[7], 
          "f": $scope.formatshort($scope.sgRev[7]) 
         }, 
         { 
          "v": $scope.clRev[7], 
          "f": $scope.formatshort($scope.clRev[7]) 
         } 

         ] 
        }, 
        { 
         "c": [ 
         { 
          "v": $scope.MonthGraph[8] 
         }, 
         { 
          "v": $scope.netRev[8], 
          "f": $scope.formatshort($scope.netRev[8]) 
         }, 
         { 
          "v": $scope.egRev[8], 
          "f": $scope.formatshort($scope.egRev[8]) 
         }, 
         { 
          "v": $scope.sgRev[8], 
          "f": $scope.formatshort($scope.sgRev[8]) 
         }, 
         { 
          "v": $scope.clRev[8], 
          "f": $scope.formatshort($scope.clRev[8]) 
         } 

         ] 
        }, 
        { 
         "c": [ 
         { 
          "v": $scope.MonthGraph[9] 
         }, 
         { 
          "v": $scope.netRev[9], 
          "f": $scope.formatshort($scope.netRev[9]) 
         }, 
         { 
          "v": $scope.egRev[9], 
          "f": $scope.formatshort($scope.egRev[9]) 
         }, 
         { 
          "v": $scope.sgRev[9], 
          "f": $scope.formatshort($scope.sgRev[9]) 
         }, 
         { 
          "v": $scope.clRev[9], 
          "f": $scope.formatshort($scope.clRev[9]) 
         } 

         ] 
        }, 
        { 
         "c": [ 
         { 
          "v": $scope.MonthGraph[10] 
         }, 
         { 
          "v": $scope.netRev[10], 
          "f": $scope.formatshort($scope.netRev[10]) 
         }, 
         { 
          "v": $scope.egRev[10], 
          "f": $scope.formatshort($scope.egRev[10]) 
         }, 
         { 
          "v": $scope.sgRev[10], 
          "f": $scope.formatshort($scope.sgRev[10]) 
         }, 
         { 
          "v": $scope.clRev[10], 
          "f": $scope.formatshort($scope.clRev[10]) 
         } 

         ] 
        }, 
        { 
         "c": [ 
         { 
          "v": $scope.MonthGraph[11] 
         }, 
         { 
          "v": $scope.netRev[11], 
          "f": $scope.formatshort($scope.netRev[11]) 
         }, 
         { 
          "v": $scope.egRev[11], 
          "f": $scope.formatshort($scope.egRev[11]) 
         }, 
         { 
          "v": $scope.sgRev[11], 
          "f": $scope.formatshort($scope.sgRev[11]) 
         }, 
         { 
          "v": $scope.clRev[11], 
          "f": $scope.formatshort($scope.clRev[11]) 
         } 

         ] 
        }, 
        { 
         "c": [ 
         { 
          "v": $scope.MonthGraph[12] 
         }, 
         { 
          "v": $scope.netRev[12], 
          "f": $scope.formatshort($scope.netRev[12]) 
         }, 
         { 
          "v": $scope.egRev[12], 
          "f": $scope.formatshort($scope.egRev[12]) 
         }, 
         { 
          "v": $scope.sgRev[12], 
          "f": $scope.formatshort($scope.sgRev[12]) 
         }, 
         { 
          "v": $scope.clRev[12], 
          "f": $scope.formatshort($scope.clRev[12]) 
         } 

         ] 
        } 

        ] 

我想使從NetRev [11]到NetRev [12]的線條變爲灰色。 在此先感謝。

回答

0

確定性作用應該是在其自己的列,
並按照應在該示例中被虛線

串聯列中,"Net"列線是虛線(NetRev [11]〜NetRev [12 ]

的列的值應該是...

true =固體
false =虛線

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable({ 
 
     "cols": [ 
 
     { 
 
      "id": "month", 
 
      "label": "Month", 
 
      "type": "string", 
 
      "p": {} 
 
     }, 
 
     { 
 
      "id": "Net", 
 
      "label": "Net", 
 
      "type": "number", 
 
      "p": {} 
 
     }, 
 
     { 
 
      "role": "certainty", 
 
      "type": "boolean", 
 
      "p": {} 
 
     }, 
 
     { 
 
      "id": "Eg", 
 
      "label": "EG", 
 
      "type": "number", 
 
      "p": {} 
 
     }, 
 
     { 
 
      "id": "Sg", 
 
      "label": "SG", 
 
      "type": "number", 
 
      "p": {} 
 
     }, 
 
     { 
 
      "id": "CL", 
 
      "label": "CL", 
 
      "type": "number", 
 
      "p": {} 
 
     } 
 
     ], 
 
     "rows": [ 
 
     { 
 
      "c": [ 
 
      { 
 
       "v": 'JAN' 
 
      }, 
 
      { 
 
       "v": 10000, 
 
       "f": "10K" 
 
      }, 
 
      { 
 
       "v": true 
 
      }, 
 
      { 
 
       "v": 11000, 
 
       "f": "11K" 
 
      }, 
 
      { 
 
       "v": 12000, 
 
       "f": "12K" 
 
      }, 
 
      { 
 
       "v": 13000, 
 
       "f": "13K" 
 
      } 
 
      ] 
 
     }, 
 
     { 
 
      "c": [ 
 
      { 
 
       "v": 'FEB' 
 
      }, 
 
      { 
 
       "v": 10000, 
 
       "f": "10K" 
 
      }, 
 
      { 
 
       "v": true 
 
      }, 
 
      { 
 
       "v": 11000, 
 
       "f": "11K" 
 
      }, 
 
      { 
 
       "v": 12000, 
 
       "f": "12K" 
 
      }, 
 
      { 
 
       "v": 13000, 
 
       "f": "13K" 
 
      } 
 
      ] 
 
     }, 
 
     { 
 
      "c": [ 
 
      { 
 
       "v": 'MAR' 
 
      }, 
 
      { 
 
       "v": 10000, 
 
       "f": "10K" 
 
      }, 
 
      { 
 
       "v": true 
 
      }, 
 
      { 
 
       "v": 11000, 
 
       "f": "11K" 
 
      }, 
 
      { 
 
       "v": 12000, 
 
       "f": "12K" 
 
      }, 
 
      { 
 
       "v": 13000, 
 
       "f": "13K" 
 
      } 
 
      ] 
 
     }, 
 
     { 
 
      "c": [ 
 
      { 
 
       "v": 'APR' 
 
      }, 
 
      { 
 
       "v": 10000, 
 
       "f": "10K" 
 
      }, 
 
      { 
 
       "v": true 
 
      }, 
 
      { 
 
       "v": 11000, 
 
       "f": "11K" 
 
      }, 
 
      { 
 
       "v": 12000, 
 
       "f": "12K" 
 
      }, 
 
      { 
 
       "v": 13000, 
 
       "f": "13K" 
 
      } 
 
      ] 
 
     }, 
 
     { 
 
      "c": [ 
 
      { 
 
       "v": 'MAY' 
 
      }, 
 
      { 
 
       "v": 10000, 
 
       "f": "10K" 
 
      }, 
 
      { 
 
       "v": true 
 
      }, 
 
      { 
 
       "v": 11000, 
 
       "f": "11K" 
 
      }, 
 
      { 
 
       "v": 12000, 
 
       "f": "12K" 
 
      }, 
 
      { 
 
       "v": 13000, 
 
       "f": "13K" 
 
      } 
 
      ] 
 
     }, 
 
     { 
 
      "c": [ 
 
      { 
 
       "v": 'JUN' 
 
      }, 
 
      { 
 
       "v": 10000, 
 
       "f": "10K" 
 
      }, 
 
      { 
 
       "v": false 
 
      }, 
 
      { 
 
       "v": 11000, 
 
       "f": "11K" 
 
      }, 
 
      { 
 
       "v": 12000, 
 
       "f": "12K" 
 
      }, 
 
      { 
 
       "v": 13000, 
 
       "f": "13K" 
 
      } 
 
      ] 
 
     } 
 
     ] 
 
    }); 
 

 
    var container = document.getElementById('chart'); 
 
    var chart = new google.visualization.LineChart(container); 
 
    chart.draw(data); 
 
    }, 
 
    packages: ['corechart'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>

+0

嘿,感謝您的回答。這工作。我沒有我的upvote聲望被顯示,但非常感謝。 –