当值相同时,如何单独显示行而不重叠

问题描述 投票:1回答:1

使用谷歌图表API(折线图)。我有相同的值集,用于绘制服务器和运输的行,因为值相同,两行重叠,如演示https://plnkr.co/edit/PNA1XQapRzvxGfm7behd?p=preview所示

有没有一种方法可以让我们看到两条线而不是重叠它们具有相同的值?

angular.module('myApp', ['googlechart'])
  .controller('myController', function($scope) {
    var chart1 = {};
    chart1.type = "LineChart";
    chart1.displayed = false;
    chart1.data = {
      "cols": [{
        id: "month",
        label: "Month",
        type: "string"
      }, {
        id: "laptop-id",
        label: "Laptop",
        type: "number"
      }, {
        id: "desktop-id",
        label: "Desktop",
        type: "number"
      }, {
        id: "server-id",
        label: "Server",
        type: "number"
      }, {
        id: "cost-id",
        label: "Shipping",
        type: "number"
      }],
      "rows": [{
        c: [{
          v: "January"
        }, {
          v: 19,
         }, {
          v: 12,
         }, {
          v: 7, //server
         }, {
          v: 7  //shipping
        }]
      }, {
        c: [{
          v: "February"
        }, {
          v: 13
        }, {
          v: 1,
         }, {
          v: 12  //server
        }, {
          v: 12  //shipping
        }]
      }, {
        c: [{
            v: "March"
          }, {
            v: 24
          }, {
            v: 5
          }, { 
            v: 11  //server
          }, {
            v: 11  //shipping
          }
        ]
      }]
    };
    chart1.options = {
      "title": "Sales per month",
      "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
      "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
      "isStacked": "percent",
       focusTarget: 'category',
      "fill": 20,
      "displayExactValues": true,
      "vAxis": {
        "title": "Sales unit",
        "gridlines": {
          "count": 10
        }
      },
      "hAxis": {
        "title": "Date"
      }
    };
    chart1.view = {
      columns: [0, 1, 2, 3, 4]
    };
    $scope.myChart = chart1;
  });
google-visualization linechart
1个回答
0
投票

使用series图表选项在特定系列上设置pointSize

以下将更改提供的示例中的服务器系列...

  series: {
    2: {
      pointSize: 8
    }
  }

看看forked plnker ......

© www.soinside.com 2019 - 2024. All rights reserved.