时间戳

首页 > 解决方案 > 删除 LightningChart Chart3D 中的所有轴线

javascript - 删除 LightningChart Chart3D 中的所有轴线

问题描述

我在 React 沙盒应用程序中使用lcjs，试图制作一个仅呈现条形本身的 3D 条形图。（这些条在示例中隐藏）

但是，API 文档似乎没有给我一种访问 3D 画布中绘制的所有线条的方法。

这是所有行的示例：

this.chart = lightningChart().Chart3D({ container: this.chartId });

这是生成的 3D 视图，周围有所有线条： 在此处输入图像描述

我能够用这个删除主轴线：

this.chart.forEachAxis((axis) => {
  axis.setStrokeStyle(emptyLine);
});

在此处输入图像描述

注意主轴现在是空的，但所有其他“非默认”的仍然存在。

我将如何隐藏所有这些并让图表呈现没有任何轴线？

标签： javascriptlightningchart

解决方案

可以使用自定义主题编辑边界框线样式。

LightningChart JS 导出customTheme功能，可用于基于另一个主题创建新主题。您可以使用该功能创建一个新主题，其中边界框线设置为emptyLine。

const myTheme = customTheme(Themes.dark, {
    boundingBoxStyle3D: emptyLine
})

然后，当您创建 3D 图表时，您可以使用创建的主题作为图表应使用的主题。

const chart3D = lightningChart().Chart3D({
    theme: myTheme
})

请参阅下面的工作示例。

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    SolidFill,
    SolidLine,
    Themes,
    customTheme,
    emptyLine,
    emptyTick
} = lcjs

// Create custom theme based on the dark theme and edit the boundingBoxStyle3D property to be emptyLine to hide the bounding box lines
const myTheme = customTheme(Themes.dark, {
    boundingBoxStyle3D: emptyLine
})

// Initiate chart
const chart3D = lightningChart().Chart3D({
    theme: myTheme
})

// Set Axis titles
chart3D.getDefaultAxisX()
    .setTickStrategy("Empty")
    .setStrokeStyle(emptyLine)
chart3D.getDefaultAxisY()
    .setTickStrategy("Empty")
    .setStrokeStyle(emptyLine)
chart3D.getDefaultAxisZ()
    .setTickStrategy("Empty")
    .setStrokeStyle(emptyLine)
<script src="https://unpkg.com/@arction/lcjs@2.1.0/dist/lcjs.iife.js"></script>

推荐阅读