如果值在边界之外,则边界上的散点图绘制
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如果值在边界之外,则边界上的散点图绘制相关的知识,希望对你有一定的参考价值。
我正在开发一个散点图(有四个象限)。我希望系列中的每个点都位于象限内(如果值在x轴和y轴边界内)或者如果值超出轴范围则仅绘制在轴边界上。
附加一个jsfiddle,其中每个系列中的第二个点位于边界之外,但是不可见(如预期的那样),但是我希望这些点在我的情况下绘制在边界线100或-100上,并且仍然显示工具提示与实际价值。
http://jsfiddle.net/raghuromp/xjzd9k02/2/
var series1Data = [ [71,33], [75, -105]];
var series2Data = [ [80,-59], [101, 56]];
有人可以帮我解决这个问题吗?
答案
你可以像这样使用load event来实现这个目的:
chart:
events:
load: function()
for (var i = 0; i < this.series.length; i++)
var data = this.series[i].data
for (var j = 0; j < data.length; j++)
data[j].actualXValue = data[j].x
data[j].actualYValue = data[j].y
if (data[j].x > 100)
data[j].x = 100
if (data[j].x < -100)
data[j].x = -100
if (data[j].y > 100)
data[j].y = 100
if (data[j].y < -100)
data[j].y = -100
this.series[i].update(
data: data
)
,
...
这会遍历所有存在的点,如果它们超出+ -100则会更改它们的值,但会将实际值保存在单独的参数中。
然后,更改工具提示以反映实际值,可以这样做:
tooltip:
formatter: function()
return '<b>' + this.series.name + '</b><br/>' +
this.point.actualXValue + ': ' + this.point.actualYValue;
,
工作JSFiddle:http://jsfiddle.net/ewolden/nsdk40ez/21/
以上是关于如果值在边界之外,则边界上的散点图绘制的主要内容,如果未能解决你的问题,请参考以下文章