删除LightningChart Chart3D中的所有轴线

Question

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

然而，API文档似乎并没有为我提供一种访问3D画布中绘制的所有线条的方法。

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

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

这是生成的三维视图，其中包含所有周围的线：

​

我可以用下面的代码删除主轴线：

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>

​