删除 LightningChart Chart3D 中的所有轴线

Question

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

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

以下是包含所有行的示例：

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

这是生成的 3D 视图，包括所有周围的线条：

我可以用这个删除主轴线：

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

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

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

Answer 1

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

LightningChart JS 导出 customTheme function that can be used to create a new theme based on another theme. You can use that function to create a new theme with the bounding box lines set to 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>

删除 LightningChart Chart3D 中的所有轴线

Removing all axis lines in LightningChart Chart3D

javascript

lightningchart