Tuya Developer Forum

现有有关温湿度的项目，需求是多功能点（温度和湿度）同时显示在一张统计图表上（此需求现有图库StatCharts满足），且温度在不同单位（℃或℉）下，图表上要显示对应单位下的温度值（此需求现有图库StatCharts不满足）。现象是：现有的图库使用过程中，当使用图库StatCharts属性unit传℃值时，其图表能正常显示其温湿度的值和单位（图一）；但是当属性unit传℃值时，其图表能正常显示其温湿度的单位，湿度的值也对应正常，但是温度的值依然显示的是单位为℃时候的数据值（图二）。

我看单位切换是显示正常的，你的需求实际上应该是要支持数据根据单位做转换吧？比如在摄氏度的时候是 28.6，在华氏度的时候期望转成 83.48

lshinylee 2023年 Nov 20日 18:35

我看单位切换是显示正常的，你的需求实际上应该是要支持数据根据单位做转换吧？比如在摄氏度的时候是 28.6，在华氏度的时候期望转成 83.48

是的，根据温度单位做对应数值的转换。

好的，大概了解了，我们这周评估一下给个可支持发布的时间

由于组件内部会根据组件传参的 设备 id、设备功能点 等获取云端原始数据并渲染图表，你这个需求相当于要在业务层根据单位来处理一下数据源，因此计划开一个类似 dataFormatter 的 props，供业务自助处理数据，类似

<Charts
devIdList={['vdevo168473759041567']} // 设备 id
dpList={[{ id: 27, name: '温度' }]} // 功能点 id 及 名称
unit="℃" // 数据单位
range="1month" // 以每个月为一个点
type="avg" // 统计类型, 统计该月的平均值
startDate="202301" // 数据开始时间 1月开始
endDate="202312" // 数据结束时间 12月结束
count={25} // 副标题上的数据
chartType={'line'} // 折线图
dataFormatter={data => {
return data.map(value => value * 1.1);
}}
/>;

预计 11.30 左右迭代支持一个版本

lshinylee 2023年 Nov 24日 09:18

由于组件内部会根据组件传参的 设备 id、设备功能点 等获取云端原始数据并渲染图表，你这个需求相当于要在业务层根据单位来处理一下数据源，因此计划开一个类似 dataFormatter 的 props，供业务自助处理数据，类似

<Charts
devIdList={['vdevo168473759041567']} // 设备 id
dpList={[{ id: 27, name: '温度' }]} // 功能点 id 及 名称
unit="℃" // 数据单位
range="1month" // 以每个月为一个点
type="avg" // 统计类型, 统计该月的平均值
startDate="202301" // 数据开始时间 1月开始
endDate="202312" // 数据结束时间 12月结束
count={25} // 副标题上的数据
chartType={'line'} // 折线图
dataFormatter={data => {
return data.map(value => value * 1.1);
}}
/>;

预计 11.30 左右迭代支持一个版本

感谢贵方的技术支持。目前有两三个项目有此类功能需求（单功能点或多功能点画图统计）

yarn add @ray-js/stat-charts@2.2.0-beta-1

可以在这个版本上尝试自行根据单位来转换，比如

import { utils } from '@ray-js/panel-sdk';

const [isTempF, setIsTempF] = React.useState(false);

<Charts
  devIdList={['vdevo168473759041567']} // 设备 id
  dpList={[{ id: 27, name: '温度' }]} // 功能点 id 及 名称
  unit="℃" // 数据单位
  range="1month" // 以每个月为一个点
  type="avg" // 统计类型, 统计该月的平均值
  startDate="202301" // 数据开始时间 1月开始
  endDate="202312" // 数据结束时间 12月结束
  count={25} // 副标题上的数据
  chartType={'line'} // 折线图
  dataTransformer={data =>
    data.map(item => ({
      ...item,
      data: item.data.map(i => ({
        ...i,
        value: isTempF ? `${utils.c2f(+i.value)}` : i.value,
      })),
    }))
  }
/>;

lshinylee 2023年 Nov 29日 09:12

yarn add @ray-js/stat-charts@2.2.0-beta-1

可以在这个版本上尝试自行根据单位来转换，比如

Code: Select all

import { utils } from '@ray-js/panel-sdk';

const [isTempF, setIsTempF] = React.useState(false);

<Charts
  devIdList={['vdevo168473759041567']} // 设备 id
  dpList={[{ id: 27, name: '温度' }]} // 功能点 id 及 名称
  unit="℃" // 数据单位
  range="1month" // 以每个月为一个点
  type="avg" // 统计类型, 统计该月的平均值
  startDate="202301" // 数据开始时间 1月开始
  endDate="202312" // 数据结束时间 12月结束
  count={25} // 副标题上的数据
  chartType={'line'} // 折线图
  dataTransformer={data =>
    data.map(item => ({
      ...item,
      data: item.data.map(i => ({
        ...i,
        value: isTempF ? `${utils.c2f(+i.value)}` : i.value,
      })),
    }))
  }
/>;

感谢贵方的技术支持！通过测试，在单功能点温度时，单位切换时其数据一切正常显示；但是存在两个功能点（温度和湿度）同在一张图表时，在切换温度单位的情况下，在华氏度时，其湿度的值同时也按照其温度转换的公式转换成了不正常的值；在摄氏度时，其湿度值显示是正常的。

这个你可以自己根据数据的索引来处理，比如

import { utils } from '@ray-js/panel-sdk';

const [isTempF, setIsTempF] = React.useState(false);

<Charts
  devIdList={['vdevo168473759041567']} // 设备 id
  dpList={[{ id: 27, name: '温度' }]} // 功能点 id 及 名称
  unit="℃" // 数据单位
  range="1month" // 以每个月为一个点
  type="avg" // 统计类型, 统计该月的平均值
  startDate="202301" // 数据开始时间 1月开始
  endDate="202312" // 数据结束时间 12月结束
  count={25} // 副标题上的数据
  chartType={'line'} // 折线图
  dataTransformer={data =>
    data.map((item, itemIdx) => ({
      ...item,
      data: item.data.map(i => ({
        ...i,
        value: isTempF && itemIdx === 1 ? `${utils.c2f(+i.value)}` : i.value,
      })),
    }))
  }
/>;

lshinylee 2023年 Nov 29日 11:24

这个你可以自己根据数据的索引来处理，比如

Code: Select all

import { utils } from '@ray-js/panel-sdk';

const [isTempF, setIsTempF] = React.useState(false);

<Charts
  devIdList={['vdevo168473759041567']} // 设备 id
  dpList={[{ id: 27, name: '温度' }]} // 功能点 id 及 名称
  unit="℃" // 数据单位
  range="1month" // 以每个月为一个点
  type="avg" // 统计类型, 统计该月的平均值
  startDate="202301" // 数据开始时间 1月开始
  endDate="202312" // 数据结束时间 12月结束
  count={25} // 副标题上的数据
  chartType={'line'} // 折线图
  dataTransformer={data =>
    data.map((item, itemIdx) => ({
      ...item,
      data: item.data.map(i => ({
        ...i,
        value: isTempF && itemIdx === 1 ? `${utils.c2f(+i.value)}` : i.value,
      })),
    }))
  }
/>;

经测试，根据数据索引来处理确实可行。现有温度一特殊值即无值的时候，如何处理？当温度在某个点没有任何值时，处于摄氏度时，图表文本显示正常（-℃），图表画线正常（沿线X轴）；而处于华氏度时，图表文本显示不正常（32℉），图表画线也是根据文本数据值画线