You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否在ZingChart中添加经值转换的次Y轴(如摄氏度转华氏度)?

在ZingChart中添加带值转换的次Y轴(摄氏度转华氏度)

完全可以实现!ZingChart提供了两种简洁的方式来配置这种带值转换的次Y轴,正好匹配你需要的摄氏度转华氏度的温度异常值展示需求。下面分别介绍两种方案:

方案1:直接使用格式化表达式

这种方式适合简单的线性转换,比如你提到的值*1.8,ZingChart支持用%v代表轴上的原始值,直接在format配置中写转换表达式即可:

var chartConfig = {
  scaleY: {
    label: { text: '温度异常值(摄氏度)' },
    // 可添加主Y轴的其他配置,比如刻度间隔、样式等
  },
  scaleY2: {
    label: { text: '温度异常值(华氏度)' },
    format: '%v*1.8' // 直接对原始值执行乘法转换
  },
  series: [
    {
      values: [0.5, 1.2, -0.3, 0.8], // 你的摄氏度异常值数据
      scaleY: 'scaleY' // 指定该系列关联主Y轴
    }
  ]
};

// 渲染图表到指定DOM元素
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%'
});

方案2:自定义格式化函数

如果后续需要更复杂的转换逻辑(比如保留小数位数、添加单位后缀、处理特殊值等),自定义函数的方式会更灵活:

// 自定义轴格式化函数,参数p包含轴的原始值等信息
function formatAxis(p) {
  // 执行摄氏度转华氏度的转换,也可以扩展其他逻辑
  const fahrenheitValue = p.value * 1.8;
  // 可选:保留1位小数并添加单位
  return { format: fahrenheitValue.toFixed(1) + ' °F' };
}

var chartConfig = {
  scaleY: {
    label: { text: '温度异常值(摄氏度)' }
  },
  scaleY2: {
    label: { text: '温度异常值(华氏度)' },
    format: 'formatAxis()' // 调用自定义格式化函数
  },
  series: [
    {
      values: [0.5, 1.2, -0.3, 0.8],
      scaleY: 'scaleY'
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%'
});

两种方案都能完美实现你的需求:主Y轴展示摄氏度温度异常值,次Y轴自动转换为华氏度展示。如果只是简单的线性转换,方案1更简洁;如果需要扩展逻辑,方案2的灵活性更高。

内容的提问来源于stack exchange,提问作者Magnum π

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.14 06:35:23