javascript - 我们可以像在双极区域图中那样在条形图中移动基线吗?
问题描述
在双极面积图中,我们可以将基线移动几个单位,以便我们可以比较基线值的数据。例如。基线或间隔的开始通常从 0 开始。我想让我的图表从 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 交互示例的垂直条示例作为工作的基本代码。此示例说明如何显示垂直条。在此示例中,矩形从 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>
推荐阅读
- bash - Openstack 快照使用 bash 命令创建和恢复脚本
- node.js - 如何使用 azure 流分析基于分区键处理数据?
- c# - 如果从 text.txt 文件中读取时,如果它在网站中实际可见,你如何忽略它?
- c - C Reader Writer Program,一个阅读器不读取所有数据
- python-3.x - 我如何在 python3 中读取、写入和更新 csv 值
- regex - Bash AWK 和 Regex 适用于特定列
- c - 是什么导致代码只是随机减去或添加小分形到浮点数?
- charts - Xcode 10 中没有这样的模块“图表”
- php - 如何从 MYSQL 数据库中仅从两个 DATETIME 中进行选择?
- linux - kexec 到 ELF x86_64 二进制文件后页表的状态是什么?