Victory js雷达图极轴如何设置类时钟刻度 使12点位于顶部

项目背景 #

计划开发时钟样式的每日气温数据可视化项目，中心区域通过雷达图展示逐小时天气数据。目前已从API接口获取到所需数据，完成基础效果初步搭建，待解决问题：如何设置外侧的极轴刻度，让刻度值12显示在图表顶部位置。

现有实现代码 #

<VictoryChart polar>
  <VictoryPolarAxis
    style={{
      axis: { stroke: "grey" },
    }}
    tickCount={12}
    labelPlacement={"vertical"}
  />
  <VictoryPolarAxis
    dependentAxis
    axisValue={hourly[0].time}
    tickCount={1}
    style={{
      axis: {
        stroke: "blue",
      },
    }}
  />
  <VictoryArea
    labelComponent={<VictoryLabel />}
    data={hourly}
    x="time"
    y="temp"
    interpolation={"basis"}
    style={{
      data: {
        fill: "none",
        stroke: "red",
        strokeWidth: "0.5",
      },
    }}
  />
  <VictoryLabel
    // text={`${hourly[0].temp} ${hourly[0].phrase}`}
    datum={{ x: 0, y: 0 }}
    backgroundStyle={{ fill: "pink" }}
    backgroundPadding={5}
  />
</VictoryChart>

当前实现效果 #

解决方案 #

Victory 极坐标组件默认将0度起点放在图表右侧（3点钟方向），角度沿逆时针方向递增，和时钟的排布逻辑不符，通过以下配置即可调整到目标效果：

• 给外层<VictoryChart>组件添加startAngle={90}，将极轴起点偏移90度到顶部（12点钟方向）
• 给外层<VictoryChart>组件添加endAngle={-270}，让极轴沿顺时针方向完成360度闭合，匹配时钟顺时针走时的刻度顺序

修改后的核心代码如下：

{/* 新增startAngle和endAngle属性调整极轴起点和旋转方向 */}
<VictoryChart 
  polar
  startAngle={90}
  endAngle={-270}
>
  <VictoryPolarAxis
    style={{
      axis: { stroke: "grey" },
    }}
    tickCount={12}
    labelPlacement={"vertical"}
    // 若自动生成的刻度顺序不符合预期，可手动指定刻度值
    // tickValues={[12,1,2,3,4,5,6,7,8,9,10,11]}
  />
  {/* 其余原有组件代码保持不变即可 */}
  <VictoryPolarAxis
    dependentAxis
    axisValue={hourly[0].time}
    tickCount={1}
    style={{
      axis: {
        stroke: "blue",
      },
    }}
  />
  <VictoryArea
    labelComponent={<VictoryLabel />}
    data={hourly}
    x="time"
    y="temp"
    interpolation={"basis"}
    style={{
      data: {
        fill: "none",
        stroke: "red",
        strokeWidth: "0.5",
      },
    }}
  />
  <VictoryLabel
    datum={{ x: 0, y: 0 }}
    backgroundStyle={{ fill: "pink" }}
    backgroundPadding={5}
  />
</VictoryChart>

如果自动生成的刻度值和时钟点位不匹配，给<VictoryPolarAxis>添加tickValues属性，传入按顺时针排列的12个点位数组即可强制指定刻度顺序。

内容的提问来源于stack exchange，提问作者jjcrl