移除 lightningChart 周围的填充

Question

我想删除图表周围所有不必要的space，即使它很小，所以我尝试了这个代码

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

顶部和底部还有一些space，请看截图

Answer 1

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

来删除它

dashboard.setSplitterStyle(emptyFill)

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

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

图表标题填充样式为 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>

移除 lightningChart 周围的填充

Remove padding around lightningChart

lightningchart