Skip to content

Commit

Permalink
udpate dataRange api and doc (splitLIst and range)
Browse files Browse the repository at this point in the history
  • Loading branch information
@100pah
100pah committed May 20, 2015
1 parent 2ea08ff commit ff6dafb
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 54 deletions.
23 changes: 15 additions & 8 deletions doc/doc-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1926,23 +1926,30 @@ <h4>dataRange<a name="DataRange"> </a></h4>
<td> the number of segments. Defaults to 5. Linear gradient when set to 0. When calculable is true, it is equally split into 100 parts by default. </td>
</tr>
<tr>
<td> <b>{number}</b> splitList </td>
<td> <b>{Array.&lt;Object&gt;}</b> splitList </td>
<td> null </td>
<td>
Customizing that how to split dataRange. When splitList is specified, splitNumber is ignored. <br />
splitList is an Array, which can not be empty. Each item of the Array is Object like: <br />
{ <br />
&nbsp;&nbsp;range: [], data range of this item, where the value can be: <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [10, 30] : means &gt;= 10 &amp;&amp; &lt;= 30 <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [null, 30] : means &lt;= 30 <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [10, null] : means &gt;= 10 <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 10 : means === 10 <br />
&nbsp;&nbsp;label: '10 to 30', text label of this item. If ignoring this attribute, text label will be auto generated. <br />
&nbsp;&nbsp;color: '#333' color of this item. If ignoring attribute, color can be auto generated. <br />
&nbsp;&nbsp;start: 10 &nbsp;&nbsp;&nbsp; The start of the domain of this item. <br />
&nbsp;&nbsp;end: 30 &nbsp;&nbsp;&nbsp; The end of the domain of this item. <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'start' and 'end' can be set to the same value, <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; in which case this item is coresponding to the single value rather than an interval. <br />
&nbsp;&nbsp;label: '10 to 30' &nbsp;&nbsp;&nbsp; text label of this item. If ignoring this attribute, Text label will be auto generated. <br />
&nbsp;&nbsp;color: '#333' &nbsp;&nbsp;&nbsp; Color of this item. If ignoring attribute, color can be auto generated. <br />
} <br />
example: <a href="./example/dataRange2.html" target="_blank">this 》</a>
</td>
</tr>
<tr>
<td> <b>{Object}</b> range </td>
<td> null </td>
<td>
This option is used to set the initial selected range of dataRange. This option works when "calculable" is true. <br />
The value of this option likes: {start: 10, end: 50}
</td>
</tr>
<tr>
<td> <b>{boolean | string}</b> selectedMode </td>
<td> true </td>
Expand Down
22 changes: 14 additions & 8 deletions doc/doc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1937,23 +1937,29 @@ <h4>dataRange<a name="DataRange"> </a></h4>
<td> 分割段数，默认为5，为0时为线性渐变，calculable为true是默认均分100份 </td>
</tr>
<tr>
<td> <b>{number}</b> splitList </td>
<td> <b>{Array.&lt;Object&gt;}</b> splitList </td>
<td> null </td>
<td>
自定义分割方式，支持不等距分割。splitList被指定时，splitNumber将被忽略。<br />
splitList是一个（不可为空的）Array，Array的每一项为一个Object，含有如下属性：<br />
{ <br />
&nbsp;&nbsp;range: [], 本项的数据范围，形式可以是： <br />
&nbsp;&nbsp;&nbsp;&nbsp; [10, 30] 表示 &gt;= 10 &amp;&amp; &lt;= 30 <br />
&nbsp;&nbsp;&nbsp;&nbsp; [null, 30] 表示 &lt;= 30 <br />
&nbsp;&nbsp;&nbsp;&nbsp; [10, null] 表示 &gt;= 10 <br />
&nbsp;&nbsp;&nbsp;&nbsp; 10 表示 === 10 <br />
&nbsp;&nbsp;label: '10 to 30', 本项的显示标签，缺省则自动生成label <br />
&nbsp;&nbsp;color: '#333' 本项的颜色，缺省则自动计算color <br />
&nbsp;&nbsp;start: 10 &nbsp;&nbsp;&nbsp; 本项的数据范围起点（>=），如果不设置表示负无穷。<br />
&nbsp;&nbsp;end: 30 &nbsp;&nbsp;&nbsp; 本项的数据范围终点（<=），如果不设置表示正无穷。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果想本项只对应一个值，那么start和end设同样的数就可以了。<br />
&nbsp;&nbsp;label: '10 to 30' &nbsp;&nbsp;&nbsp; 本项的显示标签，缺省则自动生成label <br />
&nbsp;&nbsp;color: '#333' &nbsp;&nbsp;&nbsp; 本项的颜色，缺省则自动计算color <br />
} <br />
详见例子 <a href="./example/dataRange2.html" target="_blank">this 》</a>
</td>
</tr>
<tr>
<td> <b>{Object}</b> range </td>
<td> null </td>
<td>
用于设置dataRange的初始选中范围。calculable为true时有效。<br />
其值型如：{start: 10, end: 50}。
</td>
</tr>
<tr>
<td> <b>{boolean | string}</b> selectedMode </td>
<td> true </td>
Expand Down
14 changes: 7 additions & 7 deletions doc/example/dataRange.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,13 +143,13 @@
orient: 'vertical', // 'vertical'
color: ['red', 'pink'], //颜色
splitList: [
{range: [300000]},
{range: [900, 200000]},
{range: [310, 1000]},
{range: [200, 300]},
{range: [10, 200], label: '自定义label: 10 到 200'},
{range: 5},
{range: [null, 10], color: 'black'}
{start: 300000},
{start: 900, end: 200000},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '自定义label: 10 到 200'},
{start: 5, end: 5},
{end: 10, color: 'black'}
]
}
]
Expand Down
14 changes: 7 additions & 7 deletions doc/example/dataRange2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,13 @@
x: 'left',
y: 'bottom',
splitList: [
{range: [1500, null]},
{range: [900, 1500]},
{range: [310, 1000]},
{range: [200, 300]},
{range: [10, 200], label: '10 到 200（自定义label）'},
{range: 5, label: '5（自定义特殊颜色）', color: 'black'},
{range: [null, 10]}
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 到 200（自定义label）'},
{start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
{end: 10}
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
Expand Down
50 changes: 26 additions & 24 deletions src/component/dataRange.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,11 @@ define(function (require) {
splitList: null, // 用于用户自定义不等距分割。如果定义了splitList，则splitNumber无效。
// splitList为Array.<Object>，其中每个Object形如：
// {
// range: [], 本项的数据范围，形式可以是：
// [10, 30] 表示 >= 10 && <= 30
// [null, 30] 表示 <= 30
// [10, null] 表示 >= 10
// 10 表示 === 10
// label: '10 to 30', 本项的显示标签，缺省则自动生成label
// color: '#333' 本项的显示颜色，缺省则自动计算color
// start: 10, 本项的数据范围起点（>=），如果不设置表示负无穷。
// 如果想本项只对应一个值，那么start和end设同样的数就可以了。
// end: 90 本项的数据范围终点（<=），如果不设置表示正无穷。
// label: '10 to 30', 本项的显示标签，缺省则自动生成label。
// color: '#333' 本项的显示颜色，缺省则自动计算color。
// }
calculable: false, // 是否值域漫游，启用后无视splitNumber和splitList，线性渐变
selectedMode: true, // 选择模式，默认开启值域开关
Expand Down Expand Up @@ -1063,13 +1061,20 @@ define(function (require) {
// 外部传入range （calculable为true时有意义）
_syncShapeFromRange : function () {
var range = this.dataRangeOption.range || {};
// 做一个反转
this._range.end = typeof this._range.end != 'undefined'
? this._range.end
: (typeof range.start != 'undefined' ? range.start : 0);
this._range.start = typeof this._range.start != 'undefined'
? this._range.start
: (typeof range.end != 'undefined' ? range.end : 100);
var optRangeStart = range.start;
var optRangeEnd = range.end;
if (optRangeEnd < optRangeStart) {
optRangeStart = [optRangeEnd, optRangeEnd = optRangeStart][0]; // 反转
}

// 内部使用的_range和option的range的start、end的定义是相反的。
// 为了支持myChart.setOption(option, true); option中的设置优先。
this._range.end = optRangeStart != null
? optRangeStart
: (this._range.end != null ? this._range.end : 0);
this._range.start = optRangeEnd != null
? optRangeEnd
: (this._range.start != null ? this._range.start : 100);

if (this._range.start != 100 || this._range.end !== 0) {
// 非默认满值同步一下图形
Expand Down Expand Up @@ -1508,26 +1513,23 @@ define(function (require) {

for (var i = 0, len = splitList.length; i < len; i++) {
var splitListItem = splitList[i];
if (!splitListItem || !splitListItem.range) {
if (!splitListItem || (splitListItem.start == null && splitListItem.end == null)) {
throw new Error('Empty item exists in splitList!');
}

var range = splitListItem.range;
var reformedItem = {
label: splitListItem.label,
color: splitListItem.color
};
reformedItem.min = splitListItem.start;
reformedItem.max = splitListItem.end;

if (Object.prototype.toString.call(range) === '[object Array]') {
reformedItem.min = range[0];
reformedItem.max = range[1];
if (reformedItem.min > reformedItem.max) { // Need to be exchanged
reformedItem.min = [reformedItem.max, reformedItem.max = reformedItem.min][0];
}
else {
reformedItem.min = range;
reformedItem.max = range;
reformedItem.single = range;
if (reformedItem.min === reformedItem.max) {
reformedItem.single = reformedItem.max; // Coresponding to single value
}

if (reformedItem.min == null) {
reformedItem.min = -Number.MAX_VALUE;
}
Expand Down

0 comments on commit ff6dafb

Please sign in to comment.