如何设置angular-google-line-chart的样式以使同一行有两种样式？

Question

我想使用angular-google-chart来绘制折线图，​​以显示一些统计数据以及未来预测。我希望我的投影是虚线。以下是我的示例代码。目前，我的折线图将显示统计和未来预测的相同颜色。我希望它可以是不同颜色，或者可能是未来投影的虚线。

HTML

<div google-chart chart="stat"></div>

JS

$scope.stat = {
          "type": "LineChart",
          "displayed": false,
          "data": {
            "cols": [
              {
                "id": "date",
                "label": "Date",
                "type": "string",
              },
              {
                "id": "sales-id",
                "label": "Sales",
                "type": "number",
              },
            ],
            "rows": [
              {
                "c": [
                  {
                    "v": "20 Nov"
                  },
                  {
                    "v": 19,
                  }
                ]
              },
              {
                "c": [
                  {
                    "v": "21 Nov"
                  },
                  {
                    "v": 17,
                  }
                ]
              },
              {
                "c": [
                  {
                    "v": "22 Nov"
                  },
                  {
                    "v": 18,
                  }
                ]
              },
              {
                "c": [
                  {
                    "v": "23 Nov"
                  },
                  {
                    "v": 18,
                  }
                ]
              },
              //FUTURE PROJECTION
              {
                "c": [
                  {
                    "v": "24 Nov"
                  },
                  {
                    "v": 17,
                  }
                ]
              },
              {
                "c": [
                  {
                    "v": "25 Nov"
                  },
                  {
                    "v": 15,
                  }
                ]
              },
            ]
          },
          "options": {
            "isStacked": "true",
            "fill": 20,
            "displayExactValues": true,
            "legend": {"position":'none'},
          }
        }

Answer 1

您可以使用column roles：

来达到预期效果

  

列角色描述了该列中数据的用途：for   例如，列可能包含描述工具提示文本，数据点的数据   注释或不确定性指标。

因此，让我们介绍一个样式角色列：

 {
       "type": "string",
       "role": "style",
       "p": { "role": "style" }
 }

然后，指定线条样式：

 { "v": "line { stroke-color: green }" }

以下修改示例演示了如何为不同颜色的线段设置样式：

＆＃13;

＆＃13;

var app = angular.module('myApp', ['googlechart']);

app.controller('chartCtrl', function ($scope) {

    $scope.stat = {
        "type": "LineChart",
        "displayed": false,
        "data": {
            "cols": [
              {
                  "id": "date",
                  "label": "Date",
                  "type": "string",
              },
              {
                  "id": "sales-id",
                  "label": "Sales",
                  "type": "number",
              },
              {
                  "type": "string",
                  "role": "style",
                  "p": { "role": "style" }
              }
            ],
            "rows": [
              {
                  "c": [
                    {
                        "v": "20 Nov"
                    },
                    {
                        "v": 19,
                    },
                    { "v": null }

                  ]
              },
              {
                  "c": [
                    {
                        "v": "21 Nov"
                    },
                    {
                        "v": 17,
                    },
                    { "v": null }

                  ]
              },
              {
                  "c": [
                    {
                        "v": "22 Nov"
                    },
                    {
                        "v": 18,
                    },
                    { "v": null }

                  ]
              },
              {
                  "c": [
                    {
                        "v": "23 Nov"
                    },
                    {
                        "v": 18,
                    },
                    { "v": null }

                  ]
              },
              //FUTURE PROJECTION
              {
                  "c": [
                    {
                        "v": "24 Nov"
                    },
                    {
                        "v": 17,
                    },
                    { "v": "line { stroke-color: green }" }
                  ]
              },
              {
                  "c": [
                    {
                        "v": "25 Nov"
                    },
                    {
                        "v": 15,
                    },
                    { "v": "line { stroke-color: green }" }
                  ]
              },
            ]
        },
        "options": {
            "isStacked": "true",
            "fill": 20,
            "displayExactValues": true,
            "legend": { "position": 'none' },
        }
    }
});

＆＃13;

<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' ng-controller="chartCtrl">
    <div google-chart chart="stat"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle