去除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

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

dashboard.setSplitterStyle(emptyFill)

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

要获得一个没有不必要空间的图表，您需要设置：

emptyFill

• chart填充格式到0

• 所有轴勾形样式到emptyTick

• all轴笔画样式到emptyLine

• all轴笔画样式到emptyLine

• dashboard拆分样式到emptyLine

• dashboard背景笔画样式到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>

​