@ray-js/chart

v1.7.0

Published

a year ago

Tuya Ray Chart

Downloads

0High
0Medium
0Low

tuyafe

English | 简体中文

@ray-js/chart

Tuya Ray Chart，基于 f2-v3

须知

由于线上环境 Function.prototype.toString 被禁用，所以 onInit 需要传入模版字符串。可以访问 F2、chart、data、theme、解构过的 extraData、callMethod、_(lodash)、console
模版字符串中只能编写 es5 代码，但是你可以使用 lodash 的方法来实现功能，直接调用 _. 就可以。
事件回调函数必须使用 useCallback 包裹，否则当页面状态更改时图表会重复渲染。

特性

开箱即用，无需关心 polyfill
降低心智负担，专注业务开发
解决了 f2 在小程序中 pinch 和 pan 不生效的问题
内置手势支持（基于 @ray-js/gesture）
内置响应式明暗主题支持

安装

$ npm install @ray-js/chart
// 或者
$ yarn add @ray-js/chart

使用

柱状图选中

import React from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/sales.json';

export default function ColumnSelect() {
  // 为了防止图表重复渲染，必须使用 React.useCallback 包裹一下回调函数
  const onIntervalSelectStart = React.useCallback(event => {
    console.log('onIntervalSelectStart', event);
  }, []);
  const onIntervalSelectEnd = React.useCallback(event => {
    console.log('onIntervalSelectEnd', event);
  }, []);
  return (
    <Chart
      data={data}
      interactions={['interval-select']}
      onIntervalSelectStart={onIntervalSelectStart}
      onIntervalSelectEnd={onIntervalSelectEnd}
      onInit={`
        chart.interval().position('year*sales');
        chart.render();
        chart.interaction('interval-select', {
          // 小程序中使用 touchstart 表现才正常
          startEvent: 'touchstart',
          onStart: function(ev) {
            callMethod('IntervalSelectStart', ev.data);
          },
          onEnd: function(ev) {
            callMethod('IntervalSelectEnd', ev.data);
          }
        })
      `}
    />
  );
}

柱状体平移

import React, { useState, useEffect } from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/steps.json';

export default function ColumnPan() {
  const [dates, setDates] = useState([]);
  useEffect(() => {
    const originDates = [];
    data.forEach(obj => {
      if (obj.date >= '2018-05-01') {
        originDates.push(obj.date);
      }
    });
    setDates(originDates);
  }, []);

  // 为了防止图表重复渲染，必须使用 React.useCallback 包裹一下回调函数
  const onPanStart = React.useCallback(event => {
    console.log('onPanStart', event);
  }, []);
  const onPanProcess = React.useCallback(event => {
    console.log('onPanProcess', event);
  }, []);
  const onPanEnd = React.useCallback(event => {
    console.log('onPanEnd', event);
  }, []);

  return (
    <Chart
      data={data}
      scale={{
        date: {
          type: 'timeCat',
          tickCount: 5,
          values: dates,
          mask: 'MM-DD',
        },
        steps: {
          tickCount: 5,
        },
      }}
      interactions={['pan']}
      onPanStart={onPanStart}
      onPanProcess={onPanProcess}
      onPanEnd={onPanEnd}
      plugins={['scrollBar']}
      onInit={`
        chart
          .interval()
          .position('date*steps')
          .style({
            radius: [2, 2, 0, 0],
          });
        chart.scrollBar({
          mode: 'x',
          xStyle: {
            backgroundColor: '#e8e8e8',
            fillerColor: '#808080',
            offsetY: -2,
          },
        });
        chart.interaction('pan', {
          onStart: function(ev) {
            callMethod('PanStart', ev)
          },
          onProcess: function(ev) {
            callMethod('PanProcess', ev);
          },
          onEnd: function(ev) {
            callMethod('PanEnd', ev);
          },
        })
        chart.render();
      `}
    />
  );
}

柱状图缩放

import React, { useState, useEffect } from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/steps.json';

export default function ColumnPinch() {
  const [dates, setDates] = useState([]);
  useEffect(() => {
    const originDates = [];
    data.forEach(obj => {
      if (obj.date >= '2018-05-01') {
        originDates.push(obj.date);
      }
    });
    setDates(originDates);
  }, []);

  // 为了防止图表重复渲染，必须使用 React.useCallback 包裹一下回调函数
  const onPinchStart = React.useCallback(event => {
    console.log('onPinchStart', event);
  }, []);
  const onPinchProcess = React.useCallback(event => {
    console.log('onPinchProcess', event);
  }, []);
  const onPinchEnd = React.useCallback(event => {
    console.log('onPinchEnd', event);
  }, []);

  return (
    <Chart
      data={data}
      scale={{
        date: {
          type: 'timeCat',
          tickCount: 5,
          values: dates,
          mask: 'MM-DD',
        },
        steps: {
          tickCount: 5,
        },
      }}
      interactions={['pinch']}
      onPinchStart={onPinchStart}
      onPinchProcess={onPinchProcess}
      onPinchEnd={onPinchEnd}
      onInit={`
        chart
          .interval()
          .position('date*steps')
          .style({
            radius: [2, 2, 0, 0],
          });
        chart.interaction('pinch', {
          onStart: function(ev) {
            callMethod('PinchStart', ev);
          },
          onProcess: function(ev) {
            callMethod('PinchProcess', ev);
          },
          onEnd: function(ev) {
            callMethod('PinchEnd', ev);
          },
        });
        chart.render();
      `}
    />
  );
}

柱状图快扫

import React from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/sales.json';

export default function ColumnSwipe() {
  // 为了防止图表重复渲染，必须使用 React.useCallback 包裹一下回调函数
  const onSwipeStart = React.useCallback(event => {
    console.log('onSwipeStart', event);
  }, []);
  const onSwipeEnd = React.useCallback(event => {
    console.log('onSwipeEnd', event);
  }, []);
  return (
    <Chart
      data={data}
      interactions={['swipe']}
      onSwipeStart={onSwipeStart}
      onSwipeEnd={onSwipeEnd}
      onInit={`
        chart.interval().position('year*sales');
        chart.interaction('swipe', {
          onStart: function(ev) {
            callMethod('SwipeStart', ev);
          },
          onEnd: function(ev) {
            callMethod('SwipeEnd', ev);
          },
        });
        chart.render()
      `}
    />
  );
}

柱状图 tooltip

import React from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/sales.json';

export default function ColumnTooltip() {
  // 为了防止图表重复渲染，必须使用 React.useCallback 包裹一下回调函数
  const onTooltipShow = event => {
    console.log('onTooltipShow', event);
  };
  const onTooltipHide = React.useCallback(event => {
    console.log('onTooltipHide', event);
  }, []);
  return (
    <Chart
      data={data}
      onTooltipShow={onTooltipShow}
      onTooltipHide={onTooltipHide}
      onInit={`
        chart.interval().position('year*sales');
        chart.tooltip({
          showItemMarker: false,
          onShow: function(ev) {
            var items = ev.items;
            callMethod('TooltipShow', items[0]);
            items[0].name = null;
            items[0].name = items[0].title;
            items[0].value = '¥ ' + items[0].value;
          },
          onHide: function(ev) {
            callMethod('TooltipHide');
          }
        });
        chart.render();
      `}
    />
  );
}

饼图选中

import React from 'react';
import Chart from '@ray-js/chart';

const chartData = [
  {
    name: '芳华',
    percent: 0.4,
    a: '1',
  },
  {
    name: '妖猫传',
    percent: 0.2,
    a: '1',
  },
  {
    name: '机器之血',
    percent: 0.18,
    a: '1',
  },
  {
    name: '心理罪',
    percent: 0.15,
    a: '1',
  },
  {
    name: '寻梦环游记',
    percent: 0.05,
    a: '1',
  },
  {
    name: '其他',
    percent: 0.02,
    a: '1',
  },
];

export default function PieSelect() {
  // 为了防止图表重复渲染，必须使用 React.useCallback 包裹一下回调函数
  const onPieSelectStart = React.useCallback(event => {
    console.log('onSwipeStart', event);
  }, []);
  const onPieSelectEnd = React.useCallback(event => {
    console.log('onSwipeEnd', event);
  }, []);
  return (
    <Chart
      data={chartData}
      onPieSelectStart={onPieSelectStart}
      onPieSelectEnd={onPieSelectEnd}
      interactions={['pie-select']}
      onInit={`
        chart.axis(false);
        chart.tooltip(false);
        chart.coord('polar', {
          transposed: true,
          radius: 0.85,
        });
        chart.interval().position('a*percent').color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0' ]).adjust('stack')
          .style({
            lineWidth: 1,
            stroke: '#fff',
            lineJoin: 'round',
            lineCap: 'round'
          })
          .animate({
            appear: {
              duration: 1200,
              easing: 'bounceOut'
            }
          });
        chart.render();
        chart.interaction('pie-select', {
          // 小程序中使用 touchstart 表现才正常
          startEvent: 'touchstart',
          onStart: function(ev) {
            callMethod('PieSelectStart', ev);
          },
          onEnd: function(ev) {
            callMethod('PieSelectEnd', ev.data);
          },
        });
      `}
    />
  );
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@ray-js/chart

须知

特性

安装

使用

柱状图选中

柱状体平移

柱状图缩放

柱状图快扫

柱状图 tooltip

饼图选中