分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了有没有办法锁定 ChartXY 上的纵横比？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决有没有办法锁定 ChartXY 上的纵横比？？

开发过程中遇到有没有办法锁定 ChartXY 上的纵横比？的问题如何解决？下面主要结合日常开发的经验，给出你关于有没有办法锁定 ChartXY 上的纵横比？的解决方法建议，希望对你解决有没有办法锁定 ChartXY 上的纵横比？有所启发或帮助；

我正在使用 LightningChartJS，我需要保持 X 轴和 Y 轴之间的纵横比。

目前，LCJs 会根据容器的大小自动缩放图表。如果可能的话，我想要的是“修复”这个问题。以便刻度/点占据相同数量的空间（在像素意义上），而与图表的总宽度/高度无关。

或者如果这是不可能的，有没有办法保证高度的 X 单位总是等于宽度的 Y 单位？

解决方法

目前还没有专门的功能，因此需要修改自定义图表行为。由于最近有关此问题的问题越来越多，我们将在不久的将来（2021 年）制定专门的解决方案。

首先，通常这种对“静态纵横比”的需求来自于确保数据可视化在任何情况下都不会拉伸的愿望。这受到两件事的影响：

图表区域的大小（以像素为单位）。
轴间隔。

就像您提到的，默认情况下 LCJS 根据容器的大小缩放图表。为了确保图表的宽高比始终保持不变，最好自己创建包含图表的 HTML DIV 元素并使用 CSS。

您将在下面找到一个基于快速谷歌搜索“如何使用 CSS 保持纵横比”的示例。看看，当调整窗口大小时，图表的宽度和高度如何保持它们的纵横比（运行代码片段 + 整页）。

请注意，CSS 样式中使用的纵横比与实际的数据可视化无关。重要的部分是宽度和高度之间的比率设置为常数，这样图表就不会拉伸。

const {
  lightningChart
} = lcjs

const container = document.getElementById('chart')
const chart = lightningChart().ChartXY({ container })

/* https://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css/36295495#20593342 */
#chart {
  width: 100vw; 
  height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
  BACkground: pink;
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top:0;bottom:0; /* vertical center */
  left:0;right:0; /* horizontal center */
}

<script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/lcjs@3.0.0/dist/lcjs.iife.js"></script>
<div id='chart'></div>

之后，有一个问题是要确保轴间隔之间的比率不会与所需的比率发生变化。有许多 LCJS 功能会影响轴间隔：

自动滚动。我假设对于具有静态纵横比的应用程序，自动滚动不是绝对必要的，因此我建议手动配置轴间隔。

chart.getDefaultAxisX().setScrollStrategy(undefined).seTinterval(0,100)
chart.getDefaultAxisY().setScrollStrategy(undefined).seTinterval(0,100)

如果不需要用户交互，则可以禁用所有交互，而不是以下几点（setMouseInteractions 方法）。

矩形缩放。默认情况下，当按下鼠标左键并拖动到 XY 图表上方时会激活该事件，这对于静态纵横比图表来说是不合逻辑的，因此我建议禁用它。

chart.setMouseInteractionRectangleZoom(false)

轴交互。除了平移之外，所有面向单轴的用户交互对于静态纵横比图表都是不合逻辑的，因此我建议禁用它们。

chart.getDefaultAxisX()
  .setAxisInteractionZoomByDragging(false) 
  .setAxisInteractionZoomByWheeling(false) 
  .setNibInteractionScaleByDragging(false)
  .setNibInteractionScaleByWheeling(false)

其余的默认用户交互是使用鼠标平移和缩放，这不应影响轴间隔之间的比率。

这是一个代码片段：

使用 CSS 设置图表容器宽度和高度之间的静态比例。
禁用会改变 X/Y 轴间隔比的功能。
生成一些随机数据并将其放入视图中。在这种情况下，实际的数据纵横比来自生成的随机数据的边界。此处的关键是，此比率之后应在应用程序的整个生命周期中保持不变。

const {
  lightningChart
} = lcjs

const {
  createProgressiveTraceGenerator,} = xydata

const container = document.getElementById('chart')
const chart = lightningChart().ChartXY({ container })
const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()

// Configure chart and axes for static aspect ratio application.
chart
  .setMouseInteractionRectangleZoom(false)

axisX
  .setScrollStrategy(undefined)
  .setAxisInteractionZoomByDragging(false) 
  .setAxisInteractionZoomByWheeling(false) 
  .setNibInteractionScaleByDragging(false)
  .setNibInteractionScaleByWheeling(false)

axisY
  .setScrollStrategy(undefined)
  .setAxisInteractionZoomByDragging(false) 
  .setAxisInteractionZoomByWheeling(false) 
  .setNibInteractionScaleByDragging(false)
  .setNibInteractionScaleByWheeling(false)

// Add some data series.
const areaRangeSeries = chart.addAreaRangeSeries()
Promise.all(new Array(2).fill(0).map(_ => 
  createProgressiveTraceGenerator()
    .setnumberOfPoints(100)
    .generate()
    .toPromise()
))
  .then(traceData2 => {
    return traceData2[0].map((_,i) => ({
      position: i,low: Math.min(traceData2[0][i].y,traceData2[1][i].y),high: Math.max(traceData2[0][i].y,}))
  })
  .then(areaRangeData => {
    areaRangeSeries.add(areaRangeData)
    axisX.fit(false)
    axisY.fit(false)
  })

// Debug active aspect ratio.
const labelAspectRatio = document.getElementById('debug-aspect-ratio')
const updateDebug = () => {
  const activeAspectRatio = (axisY.geTinterval().end - axisY.geTinterval().start) / (axisX.geTinterval().end - axisX.geTinterval().start)
  labelAspectRatio.innerHTML = `Axis aspect ratio (height/width): ${activeAspectRatio.toFixed(4)}`
}
seTinterval(updateDebug,100)

/* https://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css/36295495#20593342 */
#chart {
  width: 100vw; 
  height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
  BACkground: pink;
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top:0;bottom:0; /* vertical center */
  left:0;right:0; /* horizontal center */
}
#debug-aspect-ratio {
  color: black;
  z-index: 100;
}

<script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/lcjs@3.0.0/dist/lcjs.iife.js"></script>
<span id='debug-aspect-ratio'></span>
<div id='chart'></div>

目前，这听起来可能非常复杂，但请放心，我们将在不久的将来对科学的 LCJS 用例表现出更多的热爱。

如果您有更多关于宽高比的问题，请评论或编辑问题。它可能是开发专用功能的重要信息。