lightningchart - 删除 LightningChart 周围的填充

Question

我想删除图表周围所有不必要的空间，即使它非常小，所以我尝试了这段代码

chart[0].setPadding({ bottom: 0,left:-5 ,right:-5,top:0});
chart[1].setPadding({ bottom: -5,left:-5 ,right:-5,top:0});

我仍然在顶部和底部留出一些空间，请看截图

Answer 1

假设屏幕截图是单个仪表板。然后那条线将是仪表板拆分器。您可以通过将仪表板的拆分器样式设置为emptyFillwith来删除它dashboard.setSplitterStyle

dashboard.setSplitterStyle(emptyFill)

这将删除分隔线并让图表使用它正在使用的空间。

要获得图表周围绝对没有不必要空间的图表，您需要设置：

• 图表标题填充样式为emptyFill
• 图表填充为 0
• 所有轴刻度样式emptyTick
• 所有轴笔划样式emptyLine
• 所有轴笔尖样式emptyLine
• 仪表板拆分器样式emptyLine
• 仪表板背景描边样式emptyLine

请参阅下面的示例以了解其外观。

const {
    lightningChart,
    emptyLine,
    emptyTick,
    emptyFill
} = lcjs

const db = lightningChart().Dashboard({
    numberOfColumns: 1,
    numberOfRows: 2
})

const c1 = db.createChartXY({
    columnIndex: 0,
    columnSpan: 1,
    rowIndex: 0,
    rowSpan: 1
})
const c2 = db.createChartXY({
    columnIndex: 0,
    columnSpan: 1,
    rowIndex: 1,
    rowSpan: 1
})


const data = Array.from(Array(10)).map((_, i) => ({ x: i, y: Math.random() }))

const ser1 = c1.addLineSeries()
    .add(data)

const ser2 = c2.addLineSeries()
    .add(data.map((p) => ({ x: p.x, y: -p.y })))

// Hide titles and remove padding from chart
c1
    .setTitleFillStyle(emptyFill)
    .setPadding(0)
c2
    .setTitleFillStyle(emptyFill)
    .setPadding(0)

// Hide axis ticks, line and nibs
c1.getDefaultAxisX()
    .setTickStyle(emptyTick)
    .setStrokeStyle(emptyLine)
    .setNibStyle(emptyLine)
c1.getDefaultAxisY()
    .setTickStyle(emptyTick)
    .setStrokeStyle(emptyLine)
    .setNibStyle(emptyLine)
c2.getDefaultAxisX()
    .setTickStyle(emptyTick)
    .setStrokeStyle(emptyLine)
    .setNibStyle(emptyLine)
c2.getDefaultAxisY()
    .setTickStyle(emptyTick)
    .setStrokeStyle(emptyLine)
    .setNibStyle(emptyLine)

// Hide dashboard splitter and remove background stroke style.
db
    .setSplitterStyle(emptyLine)
    .setBackgroundStrokeStyle(emptyLine)

<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>