我们可以像在双极面积图中那样移动条形图中的基线吗？
Can we move the baseLine in bar charts like we do in bipolar area chart?
在双极面积图中，我们可以将基线移动几个单位，以便我们可以比较基线值的数据。
例如。基线或间隔的开始是从 0 normally.I 想要让我的图表从 40 而不是 0 开始，我们也可以在条形图中做同样的事情吗？
在双极面积图中，我们在创建完成工作的系列时传递了一个特定的额外参数
const areaBipolar = xyChart.addAreaSeries({ baseline: 40, type: AreaSeriesTypes.Bipolar })
但同样的方法似乎不适用于 RectangleSeries
已经试过API个参数
const rectangles = chart.addRectangleSeries({ baseline: 4, type: RectangleSeriesTypes.Bipolar })
const rectangles = chart.addRectangleSeries({ baseline: 4, type: AreaSeriesTypest.Bipolar })
addRectangleSeries 没有 baseline 选项。
要实现您想要的效果，您需要更改矩形的 Y 轴或 X 轴坐标，具体取决于图表是垂直的还是水平的。
让我们以 LightningChart JS 交互示例的 Vertical Bars 示例作为工作的基本代码。此示例说明如何显示垂直条。在这个例子中，矩形从 0 行开始，并且有一些向上或向下的高度。要让这些矩形从 40 或任何其他值开始，您应该查找设置矩形尺寸的位置。在这种情况下是
// Create rect dimensions.
const rectDimensions = {
x: x - figureThickness,
y: 0,
width: figureThickness,
height: entry.value
}
// Add rect to the series.
const rect = rectangles.add(rectDimensions)
如果您将 y: 0 更改为您想要的基线，例如y: 40，矩形将从y = 40开始，并根据矩形的高度向上或向下。
有关工作示例，请参阅下面的代码片段。
// Extract required parts from LightningChartJS.
const {
lightningChart,
AxisScrollStrategies,
SolidFill,
ColorRGBA,
emptyLine,
emptyFill,
AutoCursorModes,
UIOrigins,
emptyTick
} = lcjs
const lc = lightningChart()
const months = [
'January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'
]
// Define an interface for creating vertical bars.
let barChart
{
barChart = (options) => {
// flat red fill style for positive bars
const flatRedStyle = new SolidFill().setColor(ColorRGBA(242, 67, 79))
// flat blue fill style for negative bars
const flatBlueStyle = new SolidFill().setColor(ColorRGBA(42, 171, 240))
let x = 0
const figureThickness = 10
const figureGap = figureThickness * .5
const baseline = 40
const bars = []
// Create a XY-Chart and add a RectSeries to it for rendering rectangles.
const chart = lc.ChartXY(options)
.setTitle('Changes in electricity usage between 2017 and 2018')
.setAutoCursorMode(AutoCursorModes.onHover)
// Disable mouse interactions (e.g. zooming and panning) of plotting area
.setMouseInteractions(false)
// Bar series represented with rectangles.
const rectangles = chart.addRectangleSeries()
// cursor
//#region
// Show band using Rectangle series.
const band = chart.addRectangleSeries()
.setMouseInteractions(false)
.setCursorEnabled(false).add({ x: 0, y: 0, width: 0, height: 0 })
.setFillStyle(new SolidFill().setColor(ColorRGBA(255, 255, 255, 50)))
.setStrokeStyle(emptyLine)
.dispose()
// Modify AutoCursor.
chart.setAutoCursor(cursor => cursor
.disposePointMarker()
.disposeTickMarkerX()
.disposeTickMarkerY()
.setGridStrokeXStyle(emptyLine)
.setGridStrokeYStyle(emptyLine)
.setResultTable((table) => {
table
.setOrigin(UIOrigins.CenterBottom)
})
)
// Change how series parses its data-points using series method.
rectangles.setResultTableFormatter((builder, series, figure) => {
let counter = 0
// Find cached entry for the figure.
const entry = bars.find((bar, index) => {
counter = index;
return bar.rect == figure
}).entry
// Parse result table content from values of 'entry'.
return builder
.addRow(`Month: ${months[counter]}`)
.addRow(`Value: ${entry.value}%`)
})
// Apply cursor logic using series.onHover method
rectangles.onHover((_, point) => {
if (point) {
const figure = point.figure
const dimensions = figure.getDimensionsPositionAndSize()
// Show band.
band
.setDimensions({
x: dimensions.x - figureGap * .5,
y: figure.scale.y.getInnerStart(),
width: dimensions.width + figureGap,
height: figure.scale.y.getInnerInterval()
})
.restore()
} else
band.dispose()
})
//#endregion
// X-axis of the series
const axisX = chart.getDefaultAxisX()
.setTitle('Quarter')
.setMouseInteractions(false)
.setScrollStrategy(undefined)
// Disable default ticks.
.setTickStyle(emptyTick)
// Y-axis of the series
const axisY = chart.getDefaultAxisY()
.setTitle('(%)')
.setMouseInteractions(false)
.setScrollStrategy(AxisScrollStrategies.fitting)
/**
* Add multiple bars.
* @param entries Add multiple bars data.
*/
const addValues = (entries) => {
for (const entry of entries) {
bars.push(add(entry))
}
}
/**
* Add single bar.
* @param entry Add a single bar data.
*/
const addValue = (entry) => {
bars.push(add(entry))
}
/**
* Construct bar to draw.
* @param entry Single bar data.
*/
const add = (entry) => {
// Create rect dimensions.
const rectDimensions = {
x: x - figureThickness,
y: baseline,
width: figureThickness,
height: entry.value
}
// Add rect to the series.
const rect = rectangles.add(rectDimensions)
// Set individual color for the bar.
rect.setFillStyle(entry.value > 0 ? flatRedStyle : flatBlueStyle)
// Set view manually.
axisX.setInterval(
-(figureThickness + figureGap),
x + figureGap
)
// Add custom tick, more like categorical axis.
axisX.addCustomTick()
.setValue(x - figureGap)
.setGridStrokeLength(0)
.setTextFormatter(_ => entry.category)
.setMarker(marker => marker
.setPadding(4)
.setBackground((background) => background
.setFillStyle(emptyFill)
.setStrokeStyle(emptyLine)
)
)
x += figureThickness + figureGap
// Return data-structure with both original 'entry' and the rectangle figure that represents it.
return {
entry,
rect
}
}
// Return public methods of a bar chart interface.
return {
addValue,
addValues
}
}
}
// Use bar chart interface to construct series.
const chart = barChart()
// Add multiple bars at once.
chart.addValues([
{ category: '', value: 20 },
{ category: 'Q1', value: 20 },
{ category: '', value: -25 },
{ category: '', value: 40 },
{ category: 'Q2', value: 28 },
{ category: '', value: -23 },
{ category: '', value: -40 },
{ category: 'Q3', value: 35 },
{ category: '', value: 17 },
{ category: '', value: 24 },
{ category: 'Q4', value: -29 },
{ category: '', value: 15 }
])
<script src="https://unpkg.com/@arction/lcjs@1.2.2/dist/lcjs.iife.js"></script>
<div style="height: 100%;" id="target"></div>
在双极面积图中，我们可以将基线移动几个单位，以便我们可以比较基线值的数据。
例如。基线或间隔的开始是从 0 normally.I 想要让我的图表从 40 而不是 0 开始，我们也可以在条形图中做同样的事情吗？
在双极面积图中，我们在创建完成工作的系列时传递了一个特定的额外参数
const areaBipolar = xyChart.addAreaSeries({ baseline: 40, type: AreaSeriesTypes.Bipolar })
但同样的方法似乎不适用于 RectangleSeries
已经试过API个参数
const rectangles = chart.addRectangleSeries({ baseline: 4, type: RectangleSeriesTypes.Bipolar })
const rectangles = chart.addRectangleSeries({ baseline: 4, type: AreaSeriesTypest.Bipolar })
addRectangleSeries 没有 baseline 选项。
要实现您想要的效果，您需要更改矩形的 Y 轴或 X 轴坐标，具体取决于图表是垂直的还是水平的。
让我们以 LightningChart JS 交互示例的 Vertical Bars 示例作为工作的基本代码。此示例说明如何显示垂直条。在这个例子中，矩形从 0 行开始，并且有一些向上或向下的高度。要让这些矩形从 40 或任何其他值开始，您应该查找设置矩形尺寸的位置。在这种情况下是
// Create rect dimensions.
const rectDimensions = {
x: x - figureThickness,
y: 0,
width: figureThickness,
height: entry.value
}
// Add rect to the series.
const rect = rectangles.add(rectDimensions)
如果您将 y: 0 更改为您想要的基线，例如y: 40，矩形将从y = 40开始，并根据矩形的高度向上或向下。
有关工作示例，请参阅下面的代码片段。
// Extract required parts from LightningChartJS.
const {
lightningChart,
AxisScrollStrategies,
SolidFill,
ColorRGBA,
emptyLine,
emptyFill,
AutoCursorModes,
UIOrigins,
emptyTick
} = lcjs
const lc = lightningChart()
const months = [
'January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'
]
// Define an interface for creating vertical bars.
let barChart
{
barChart = (options) => {
// flat red fill style for positive bars
const flatRedStyle = new SolidFill().setColor(ColorRGBA(242, 67, 79))
// flat blue fill style for negative bars
const flatBlueStyle = new SolidFill().setColor(ColorRGBA(42, 171, 240))
let x = 0
const figureThickness = 10
const figureGap = figureThickness * .5
const baseline = 40
const bars = []
// Create a XY-Chart and add a RectSeries to it for rendering rectangles.
const chart = lc.ChartXY(options)
.setTitle('Changes in electricity usage between 2017 and 2018')
.setAutoCursorMode(AutoCursorModes.onHover)
// Disable mouse interactions (e.g. zooming and panning) of plotting area
.setMouseInteractions(false)
// Bar series represented with rectangles.
const rectangles = chart.addRectangleSeries()
// cursor
//#region
// Show band using Rectangle series.
const band = chart.addRectangleSeries()
.setMouseInteractions(false)
.setCursorEnabled(false).add({ x: 0, y: 0, width: 0, height: 0 })
.setFillStyle(new SolidFill().setColor(ColorRGBA(255, 255, 255, 50)))
.setStrokeStyle(emptyLine)
.dispose()
// Modify AutoCursor.
chart.setAutoCursor(cursor => cursor
.disposePointMarker()
.disposeTickMarkerX()
.disposeTickMarkerY()
.setGridStrokeXStyle(emptyLine)
.setGridStrokeYStyle(emptyLine)
.setResultTable((table) => {
table
.setOrigin(UIOrigins.CenterBottom)
})
)
// Change how series parses its data-points using series method.
rectangles.setResultTableFormatter((builder, series, figure) => {
let counter = 0
// Find cached entry for the figure.
const entry = bars.find((bar, index) => {
counter = index;
return bar.rect == figure
}).entry
// Parse result table content from values of 'entry'.
return builder
.addRow(`Month: ${months[counter]}`)
.addRow(`Value: ${entry.value}%`)
})
// Apply cursor logic using series.onHover method
rectangles.onHover((_, point) => {
if (point) {
const figure = point.figure
const dimensions = figure.getDimensionsPositionAndSize()
// Show band.
band
.setDimensions({
x: dimensions.x - figureGap * .5,
y: figure.scale.y.getInnerStart(),
width: dimensions.width + figureGap,
height: figure.scale.y.getInnerInterval()
})
.restore()
} else
band.dispose()
})
//#endregion
// X-axis of the series
const axisX = chart.getDefaultAxisX()
.setTitle('Quarter')
.setMouseInteractions(false)
.setScrollStrategy(undefined)
// Disable default ticks.
.setTickStyle(emptyTick)
// Y-axis of the series
const axisY = chart.getDefaultAxisY()
.setTitle('(%)')
.setMouseInteractions(false)
.setScrollStrategy(AxisScrollStrategies.fitting)
/**
* Add multiple bars.
* @param entries Add multiple bars data.
*/
const addValues = (entries) => {
for (const entry of entries) {
bars.push(add(entry))
}
}
/**
* Add single bar.
* @param entry Add a single bar data.
*/
const addValue = (entry) => {
bars.push(add(entry))
}
/**
* Construct bar to draw.
* @param entry Single bar data.
*/
const add = (entry) => {
// Create rect dimensions.
const rectDimensions = {
x: x - figureThickness,
y: baseline,
width: figureThickness,
height: entry.value
}
// Add rect to the series.
const rect = rectangles.add(rectDimensions)
// Set individual color for the bar.
rect.setFillStyle(entry.value > 0 ? flatRedStyle : flatBlueStyle)
// Set view manually.
axisX.setInterval(
-(figureThickness + figureGap),
x + figureGap
)
// Add custom tick, more like categorical axis.
axisX.addCustomTick()
.setValue(x - figureGap)
.setGridStrokeLength(0)
.setTextFormatter(_ => entry.category)
.setMarker(marker => marker
.setPadding(4)
.setBackground((background) => background
.setFillStyle(emptyFill)
.setStrokeStyle(emptyLine)
)
)
x += figureThickness + figureGap
// Return data-structure with both original 'entry' and the rectangle figure that represents it.
return {
entry,
rect
}
}
// Return public methods of a bar chart interface.
return {
addValue,
addValues
}
}
}
// Use bar chart interface to construct series.
const chart = barChart()
// Add multiple bars at once.
chart.addValues([
{ category: '', value: 20 },
{ category: 'Q1', value: 20 },
{ category: '', value: -25 },
{ category: '', value: 40 },
{ category: 'Q2', value: 28 },
{ category: '', value: -23 },
{ category: '', value: -40 },
{ category: 'Q3', value: 35 },
{ category: '', value: 17 },
{ category: '', value: 24 },
{ category: 'Q4', value: -29 },
{ category: '', value: 15 }
])
<script src="https://unpkg.com/@arction/lcjs@1.2.2/dist/lcjs.iife.js"></script>
<div style="height: 100%;" id="target"></div>