Question

我正在使用谷歌图表API。我正在使用时间线图表。我想根据条件检查在时间线图表中指定条形图的颜色。

以下是条件：

 var firstWord = value.detail.trim().split(' ')[0];
   if(firstWord === 'monthly'){  $scope.chart.options.colors[0]='yellow';}
   if(firstWord === 'daily') {  $scope.chart.options.colors[0]='green';}

如何根据条件检查在运行时动态分配$scope.chart.options中的颜色。

完成js代码：

app.controller('MyController', ['$rootScope', '$scope',function ($scope, MyService) {
     $scope.chart = {};
    $scope.chart.type = "Timeline";
    $scope.chart.cssStyle = "height:80%; width:100%;";

    $scope.chart.options = {
        timeline: {
             barLabelStyle: { fontSize: 14 ,bold:true}
        },
         // colors:['#7EAE5A','#0E77B4'],
     };
   $scope.chart.data = {
        "cols": [
            {id: "status", label: "Status", type: "string"},
            {id: "detail", label: "Detail", type: "string"},
            {id:"tooltip", role:"tooltip", type:"string"},
              {id: "startDate", label: "startDate", type: "date"},
            {id: "endDate", label: "endDate", type: "date"}
        ]
    };

   //getting the response data
        MyService.getResponseData().then(
            function (response) {
                $scope.myResponse = response;
                    $scope.chart.data.rows = {};
                    angular.forEach($scope.myResponse, function (value, key) {
                         var firstWord = value.detail.trim().split(' ')[0];
                        if(firstWord === 'monthly'){  $scope.chart.options.colors[0]='yellow';}
                        if(firstWord === 'daily') {  $scope.chart.options.colors[0]='green';}
                         var cData = {
                            c: [{v: i}, {v: value.detail },
                                {v: "tooltip"},{v: value.startDate}, {v: value.endDate}]
                         };
                        weekRows.push(cData);i++;

                    });
                    $scope.chart.data.rows = weekRows;
               }
            },

Answer 1

您可以使用DataView动态更改颜色
使用具有'style'角色的计算列

请参阅以下工作代码段...

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var chart;
  var dataTable;
  var options;

  dataTable = google.visualization.arrayToDataTable([
    ['100', 'daily_HourlyMay', new Date(2018, 5, 1), new Date(2018, 5, 1) ],
    ['101', 'yearly_hourlyMarch113', new Date(2018, 3, 27), new Date(2018, 3, 27) ],
    ['102', 'monthly_hourlyFeb', new Date(2018, 2, 23), new Date(2018, 2, 30) ],
    ['103', 'daily_HourlyApril', new Date(2018, 4, 11), new Date(2018, 4, 18) ],
    ['104', 'daily_HourlyMarch224', new Date(2018, 3, 16), new Date(2018, 3, 27) ],
    ['105', 'monthly_HourlySept', new Date(2018, 6, 5), new Date(2018, 6, 18) ],
    ['106', 'yearly_sometext shown here', new Date(2018, 1, 12), new Date(2018, 1, 30) ],
    ['107', 'monthly_HourlySept', new Date(2018, 8, 5), new Date(2018, 8, 18) ],
    ['108', 'yearly_sometext shown here', new Date(2018, 9, 12), new Date(2018, 9, 30) ],
    ['109', 'daily_text1 data', new Date(2018, 7, 5), new Date(2018, 7, 18)
  ]], true);

  dataView = new google.visualization.DataView(dataTable);
  dataView.setColumns([0, 1, {
    calc: function (dt, row) {
      var color;
      var firstWord = dt.getValue(row, 1).trim().split('_')[0];
      switch (firstWord) {
        case 'monthly':
          color = 'yellow';
          break;

        case 'daily':
          color = 'green';
          break;

        case 'yearly':
          color = 'blue';
          break;

        default:
          color = 'black';
      }
      return color;
    },
    role: 'style',
    type: 'string',
  }, 2, 3]);

  options = {timeline: {showRowLabels: false}};
  chart = new google.visualization.Timeline(document.getElementById('chart_div'));
  chart.draw(dataView, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

更新

以角度显示，在app.js ...

中设置视图

chart1.view = {columns: [0, 1, {
  calc: function (dt, row) {
    var color;
    var firstWord = dt.getValue(row, 1).trim().split('_')[0];
    switch (firstWord) {
      case 'monthly':
        color = 'yellow';
        break;

      case 'daily':
        color = 'green';
        break;

      case 'yearly':
        color = 'blue';
        break;

      default:
        color = 'black';
    }
    return color;
  },
  role: 'style',
  type: 'string',
}, 2, 3]};

基于条件检查分配$ scope.chart.options - javascript

1 个答案: