标签:javascript charts google-visualization data-visualization
我正在使用谷歌的可视化库创建一个combochart.我在一天中绘制了商店的流量和收入.我已将绘制选项设置为
var options = {
seriesType: "bars",
series:{0:{targetAxisIndex:0},1:{targetAxisIndex:1}},
vAxes:{0:{title: "Revenue"},1:{title: "Traffic"}},
hAxis: {title: "Time", showTextEvery: 1},
};
它将收入设置在与流量不同的Y轴上.数据样本可能如下所示:
var data = [
// Time Revenue Traffic
['10:00-10:30', '132.57', '33'],
['10:30-11:00', '249.23', '42'],
['11:00-11:30', '376.84', '37'],
[... etc ..]
];
我遇到的问题是,交通价值总是积极的,而如果有收益,收入可能是负数.如果发生这种情况,我的收入轴将从负值开始,如-50,而流量从0开始,水平基线不对齐.我想拥有它,即使Revenue的值小于0,它的0轴也会与Traffic 0轴对齐.
这是一个展示正在发生的事情的例子.查看Traffic 0轴与Revenue的-50轴处于同一级别.我想知道如何将流量基线提升到与收入0轴相同的水平.
解决方法:
我有一个方法,我相当肯定将始终生成具有相同0点的轴值(我没有证明它不能产生具有不同0点的轴,但我没有遇到任何).
首先,获取两个日期系列的范围(出于我们的目的,第1列是“收入”,第2列是“流量”):
var range1 = data.getColumnRange(1);
var range2 = data.getColumnRange(2);
对于每个系列,获取系列的最大值,如果max小于或等于0,则获取1.这些值将用作图表的上限.
var maxValue1 = (range1.max <= 0) ? 1 : range1.max;
var maxValue2 = (range2.max <= 0) ? 1 : range2.max;
然后计算与两个上界相关的标量值:
var scalar = maxValue2 / maxValue1;
现在,通过取range1.min和0的较低值来计算“收入”系列的下限:
var minValue1 = Math.min(range1.min, 0);
然后将该下限乘以标量值,得到“流量”系列的下限:
var minValue2 = minValue1 * scalar;
最后,为每个轴设置vAxis minValue / maxValue选项:
vAxes: {
0: {
maxValue: maxValue1,
minValue: minValue1,
title: 'Revenue'
},
1: {
maxValue: maxValue2,
minValue: minValue2,
title: 'Traffic'
}
}
最终结果是每个系列的正负比例相等(maxValue1 /(maxValue1 – minValue1 == maxValue2 /(maxValue2 – minValue2和minValue1 /(maxValue1 – minValue1 == minValue2 /(maxValue2 – minValue2),这意味着图表轴应该以相同的正负比例结束,在两侧排列0.
这是一个有效的jsfiddle:http://jsfiddle.net/asgallant/hvJUC/.它应该适用于任何数据集,只要第二个数据系列没有负值.我正在开发一个适用于任何数据集的版本,但这应该足以满足您的使用需求.
标签:javascript,charts,google-visualization,data-visualization 来源: https://codeday.me/bug/20190629/1324963.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。