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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当值相同时,如何单独显示行而不重叠相关的知识,希望对你有一定的参考价值。

使用谷歌图表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;
  });
答案

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

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

  series: {
    2: {
      pointSize: 8
    }
  }

看看forked plnker ......

以上是关于当值相同时,如何单独显示行而不重叠的主要内容,如果未能解决你的问题,请参考以下文章

如何使用相同的外键更新行而不更新它们

无法单独选择行而不分组

Flex wrap - 堆叠行而不拉伸? [复制]

C# - 将 HTML 字符串切割成单独的行而不破坏 HTML 标签

显示所有textarea行而不滚动[重复]

将具有单独日期范围的表格组合在一起而不重叠数据 - Access