删除 LightningChart Chart3D 中的所有轴线

Question

我在 React 沙箱应用程序中使用lcjs，尝试制作仅渲染条形图本身的 3D 条形图。（示例中的条形图被隐藏了）但是，API 文档似乎没有为我提供访问 3D 画布中绘制的所有线条的方法。这是包含所有行的示例：this.chart = lightningChart().Chart3D({ container: this.chartId });这是生成的 3D 视图，包含所有周围的线条：我可以用以下方法删除主轴线：this.chart.forEachAxis((axis) => {   axis.setStrokeStyle(emptyLine); });请注意主轴现在是空的，但所有其他“非默认”轴仍然存在。我将如何隐藏所有这些并让图表在没有任何轴线的情况下呈现？

Answer 1

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

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>