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