更新配置或数据

更新图表配置或数据使用 xCharts.updateData(opts) 方法。

属性

属性	类型	说明
opts	Object	结构同 new xCharts(opts) 中的 opts 参数结构，可以是其中的某一个属性

示例

以下是一个如何使用 updateData 方法的示例：

var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function updateCharts(id, data) {
  xChartsInstance[id].updateData({
    categories: data.categories,
    series: data.series,
    animation: false
    //...... 其他配置项
  });
}

提示窗（ToolTip）

显示图表提示窗使用 `xCharts.showToolTip(event, options)` 方法。

### 属性

| 属性 | 类型 | 说明 |
| --- | --- | --- |
| event | Object | 标准 event 事件，可绑定在 `tap`、`touchstart`、`touchmove`、`touchend` 中 |
| options | Object | 自定义 ToolTip 配置，格式如下 |

##### options 配置项

| 属性 | 类型 | 说明 |
| --- | --- | --- |
| options.index | Number | 强制选中的索引，即无论选择的位置是什么，都强制选中 index 的数据 |
| options.offset | Object | 自定义 ToolTip 显示位置，格式为 `{x: Number, y: Number}` |
| options.textList | Array | 自定义 ToolTip 文案，格式为 `[ {text: 显示的字符串, color: null 或 16 进制颜色值, legendShape: 图例形状，请参考 series.legendShape 赋值} ]` |
| options.formatter | Function | 格式化显示文字，格式为 `(item, category, index, opts) => { return string xxx }` |

### 示例

以下是如何使用 `showToolTip` 方法的示例：

```javascript
xCharts.showToolTip(event, {
  index: 2, // 强制选中索引为2的数据
  offset: { x: 10, y: 20 }, // ToolTip 显示位置偏移量
  textList: [
    { text: '数据1', color: '##ff0000', legendShape: 'circle' },
    { text: '数据2', color: '##00ff00', legendShape: 'rect' }
    // 更多数据...
  ],
  formatter: (item, category, index, opts) => {
    return `类别：${category}，数据：${item}`;
  }
});

图例点击交互

实现图例点击交互使用 `xCharts.touchLegend(event, options)` 方法。

### 属性

| 属性 | 类型 | 说明 |
| --- | --- | --- |
| event | Object | 标准 event 事件，可绑定在 `tap`、`touchstart`、`touchmove`、`touchend` 中 |
| options | Object | 配置参数，格式如下 |

##### options 配置项

| 属性 | 类型 | 说明 |
| --- | --- | --- |
| options.animation | Boolean | 点击图例交互时是否开启动画效果，默认 `false` 关闭动画 |

如遇到点击不准确的问题，请参考上面 ToolTip 下的说明，需要处理 event 的坐标。

### 示例

以下是如何使用 `touchLegend` 方法的示例：

```html
<canvas canvas-id="column" id="column" class="charts" @tap="tap" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function tap(e) {
  xChartsInstance[e.target.id].touchLegend(e);
}

获取图表点击索引

获取图表点击的数据索引使用 xCharts.getCurrentDataIndex(event) 方法。

属性

属性	类型	说明
event	Object	标准 event 事件，可绑定在 tap、touchstart、touchmove、touchend 中

返回的数据为点击数据的数组下标（-1 表示未找到对应的数据区域）。如遇到获取不到索引的问题，请参考上面 ToolTip 下的说明，需要处理 event 的坐标。

示例

以下是如何使用 getCurrentDataIndex 方法的示例：

<canvas canvas-id="column" id="column" class="charts" @tap="tap" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function tap(e) {
  var index = xChartsInstance[e.target.id].getCurrentDataIndex(e);
  console.log(index); // 输出点击的数据索引
}

获取图例点击索引

获取图例点击的数据索引使用 xCharts.getLegendDataIndex(event) 方法。

属性

属性	类型	说明
event	Object	标准 event 事件，可绑定在 tap、touchstart、touchmove、touchend 中

返回的数据为点击图例的数组下标（-1 表示未找到对应的图例区域）。如遇到获取不到索引的问题，请参考上面 ToolTip 下的说明，需要处理 event 的坐标。

示例

以下是如何使用 getLegendDataIndex 方法的示例：

<canvas canvas-id="column" id="column" class="charts" @tap="tap" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function tap(e) {
  var index = xChartsInstance[e.target.id].getLegendDataIndex(e);
  console.log(index); // 输出点击图例的数据索引
}

滚动条拖拽事件

xCharts 提供了三个方法来处理图表滚动条拖拽事件：xCharts.scrollStart(event)、xCharts.scroll(event) 和 xCharts.scrollEnd(event)。

属性

方法	类型	说明
event	Object	标准 event 事件，scrollStart、scroll 和 scrollEnd 方法需要分别绑定在 touchstart、touchmove、touchend 中

支持图表滚动条拖拽事件的图表类型为：column、mount、line、area、mix、candle。

示例

以下是如何使用滚动条拖拽事件处理函数的示例：

<canvas canvas-id="column" id="column" class="charts" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function touchstart(e) {
  xChartsInstance[e.target.id].scrollStart(e);
}

function touchmove(e) {
  xChartsInstance[e.target.id].scroll(e);
}

function touchend(e) {
  xChartsInstance[e.target.id].scrollEnd(e);
  // 在 touchend 事件中也可以调用其他方法，例如：
  xChartsInstance[e.target.id].touchLegend(e);
  xChartsInstance[e.target.id].showToolTip(e);
}

动态设置滚动条

动态设置图表滚动条的位置使用 xCharts.translate(distance) 方法。

属性

属性	类型	说明
distance	Number	图表滚动条的横向偏移距离，应为负数，一般用于图表联动

此方法需要开启滚动条，支持图表滚动条拖拽事件的图表类型为：column、mount、line、area、mix、candle。

示例

以下是如何动态设置滚动条位置的示例：

var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function translateCharts(id) {
  xChartsInstance[id].translate(-100); // 设置滚动条向左移动100单位
}

图表缩放

通过 xCharts.zoom(value) 方法可以对图表进行缩放操作。

属性

属性	类型	说明
value	Number	缩放比例系数，此数值同 opts.xAxis.itemCount 作用一致，通过修改单屏显示数据数量来控制数据显示密度

支持图表缩放方法的图表类型为：column、mount、line、area、mix、candle。

示例

以下是如何对图表进行缩放的示例：

var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function zoomCharts(id) {
  xChartsInstance[id].zoom(8); // 设置图表的缩放比例为8
}

双指缩放

通过 xCharts.doubleZoom(event) 方法可以实现图表的双指缩放操作。

属性

属性	类型	说明
event	Object	标准 event 事件，需要绑定在 touchmove 事件中

支持图表缩放方法的图表类型为：column、mount、line、area、mix、candle。

示例

以下是如何实现图表双指缩放的示例：

<canvas canvas-id="column" id="column" @touchmove="touchmove" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function touchmove(e) {
  xChartsInstance[e.target.id].doubleZoom(e); // 注意：方法名应为 doubleZoom 而不是 dobuleZoom
}