图表原型方法

对于每个图表,共享ChartType上有一组全局原型方法,你可能会发现它们很有用。这些在 Chart.js 创建的所有图表上都可用,但是对于这些示例,我们使用我们制作的折线图。

  1. // For example:
  2. var myLineChart = new Chart(ctx, config);

.destroy()

使用此方法来销毁我们创建的任何图表实例。这将会清除 Chart.js 中对 chart 对象的所有引用,以及由 Chart.js 附加的任何关联的事件监听。该方法必须在 canvas 重新用于新图表之前调用。

  1. // Destroys a specific chart instance
  2. myLineChart.destroy();

.update(config)

触发图表的更新。这可以在更新数据对象之后安全地调用。这将更新所有的比例,图例,然后重新渲染图表。

  1. // duration is the time for the animation of the redraw in milliseconds
  2. // lazy is a boolean. if true, the animation can be interrupted by other animations
  3. myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
  4. myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
注意: 只在替换数据引用时起作用 (例如 myLineChart.data = {datasets: […]}

可以为config对象提供更新过程的附加配置。 当在事件处理程序中手动调用update并且需要一些不同的动画时将非常有用。

支持以下属性:

  • duration (number): 动画重绘的时间,以毫秒为单位
  • lazy (boolean): 如果为true,则动画可以被其他动画中断
  • easing (string): 动画的easing函数。 相关值请参阅Animation Easing
    例子:
  1. myChart.update({
  2. duration: 800,
  3. easing: 'easeOutBounce'
  4. })

参见更新 Charts 获取更多详细信息

.reset()

将图表重置为初始动画之前的状态。然后可以使用update来触发新的动画。

  1. myLineChart.reset();

.render(config)

触发所有图表元素的重绘。 请注意,这不会更新新数据的元素。 在这种情况下使用.update()

See .update(config) for more details on the config object.

  1. // duration is the time for the animation of the redraw in milliseconds
  2. // lazy is a boolean. if true, the animation can be interrupted by other animations
  3. myLineChart.render({
  4. duration: 800,
  5. lazy: false,
  6. easing: 'easeOutBounce'
  7. });

.stop()

使用它来停止任何当前的动画循环。 这将在当前的动画帧中暂停图表。 调用.render()重新启用动画。

  1. // Stops the charts animation loop at its current frame
  2. myLineChart.stop();
  3. // => returns 'this' for chainability

.resize()

使用该方法来手动调整画布元素的大小。 每次调整 canvas 容器的大小时都会执行此操作,但如果要更改 canvas 节点容器元素的大小,则可以手动调用此方法。

  1. // Resizes & redraws to fill its container element
  2. myLineChart.resize();
  3. // => returns 'this' for chainability

.clear()

将清除图表 canvas。 在动画帧之间广泛使用。

  1. // Will clear the canvas that myLineChart is drawn on
  2. myLineChart.clear();
  3. // => returns 'this' for chainability

.toBase64Image()

返回当前状态的图表的基本 64 位编码字符串

  1. myLineChart.toBase64Image();
  2. // => returns png data url of the image on the canvas

.generateLegend()

返回该图表的从legendCallback选项中生成的图例 HTML 字符串。

  1. myLineChart.generateLegend();
  2. // => returns HTML string of a legend for this chart

.getElementAtEvent(e)

在 Chart 实例上调用getElementAtEvent(event)传递一个事件或 jQuery 事件的参数将返回事件位置的单个元素。 如果范围内有多个项目,则只返回第一个项目。 从这个方法返回的值是一个带有单个参数的数组,用于保持get * AtEvent方法之间的一致的 API。

  1. myLineChart.getElementAtEvent(e);
  2. // => returns the first element at the event point.

To get an item that was clicked on, getElementAtEvent can be used.

  1. function clickHandler(evt) {
  2. var firstPoint = myChart.getElementAtEvent(evt)[0];
  3. if (firstPoint) {
  4. var label = myChart.data.labels[firstPoint._index];
  5. var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
  6. }
  7. }

.getElementsAtEvent(e)

查找事件点下的元素,然后返回相同数据索引处的所有元素。 在内部用于“标签”模式突出显示。在 Chart 实例上调用getElementsAtEvent(event )传递一个事件的参数或 jQuery 事件,将返回那个事件的相同位置上的点元素。

  1. canvas.onclick = function(evt) {
  2. var activePoints = myLineChart.getElementsAtEvent(evt);
  3. // => activePoints is an array of points on the canvas that are at the same position as the click event.
  4. };

这个功能对于实现基于 DOM 的工具提示,或者在应用程序中触发自定义行为是有用的。

.getDatasetAtEvent(e)

查找事件点下的元素,然后返回该数据集中的所有元素。 在内部用于'dataset'模式突出显示。

  1. myLineChart.getDatasetAtEvent(e);
  2. // => returns an array of elements

.getDatasetMeta(index)

查找与当前索引相匹配的数据集并返回该元数据。 此返回的数据具有用于构建图表的所有元数据。

元数据的data属性将包含关于每个点,矩形等的信息,具体取决于图表类型。Chart.js tests中提供了大量的用法示例。

  1. var meta = myChart.getDatasetMeta(0);
  2. var x = meta.data[0]._model.x;