epex图表JS填充到尺寸
问题描述 投票：0回答：2
因此，我有一个很小的Div，我必须将一个小的时间表排在其中。当前的问题是，由于图表完全居中，我有很多我可以真正使用的空间来制作实际数据和图表更大。：
我认为显示父级不重要（因为围绕这些尺寸的变化并不会真正影响图表本身）。感觉就像我缺少的配置中有一些选择。我已经尝试将Offsety甚至OffsetX设置为负值，因为我很拼命，但无济于事。
<html>
<div id="chartTarget" style="height: 100; width: 100%;">
<canvas id="chartCanvas" height="100"></canvas>
<div style="opacity:0;" class="chartTooltip center">
</div>
</div>
</html>
从示例中复制了序列的代码几乎是直接复制的，但是由于我一定会收到有关它的问题，因此：
var options = {
series: [
{
name: 'Pending',
data: [
{
x: 'Trip',
y: [
new Date('2021-04-21T03:24:00').getTime(),
new Date('2021-04-21T04:24:00').getTime()
]
}
]
},
{
name: 'Active',
data: [
{
x: 'Trip',
y: [
new Date('2021-04-21T05:24:00').getTime(),
new Date('2021-04-21T08:24:00').getTime()
]
}
]
},
{
name: 'Deleted',
data: [
{
x: 'Trip',
y: [
new Date('2021-04-21T11:24:00').getTime(),
new Date('2021-04-21T12:24:00').getTime()
]
}
]
}
],
chart: {
height: 75,
width: 250,
type: 'rangeBar',
offsetY: -25,
toolbar: {
show: false,
tools: {
download: false,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: true,
reset: true
}
},
events: {
dataPointMouseEnter: function (event, chartContext, config) {
config.w.config.chart.toolbar.show = false;
},
dataPointMouseLeave: function (event, chartContext, config) {
config.w.config.chart.toolbar.show = false;
}
}
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '50%',
rangeBarGroupRows: true
}
},
colors: [
"#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0",
"#3F51B5", "#546E7A", "#D4526E", "#8D5B4C", "#F86624",
"#D7263D", "#1B998B", "#2E294E", "#F46036", "#E2C044"
],
fill: {
type: 'solid'
},
xaxis: {
type: 'datetime',
labels: {
maxHeight: 25,
style: {
fontSize: '9px'
},
offsetY: -8
},
tooltip: {
enabled: false
}
},
yaxis: {
show: false,
lines: {
show: true
}
},
legend: {
show: false,
position: 'top'
}
};
var chart = new ApexCharts(document.querySelector("#chartTarget"), options);
chart.render();
图表级别的负面偏移似乎已解决了我的需求。
chart.offsetY: -25
2个回答
投票
chart.sparkline
投票
https：//apexcharts.com/docs/options/chart/sparkline/
最新问题
- Sailsjs当URL以文件扩展结束时，不会调用控制器操作
- 那里是“ F-Docstring”之类的？
- 从数组中删除一个项目，然后用相同的键在同一位置重新插入一个值
- 带有驱动程序许可证号验证的helpregex
- TPC-H查询。测试以及如何运行它们？
- 如何使用plotly.net
- 二维数组的孔行行，作为第一个遇到的行的孩子，带有给定的列值
- 出于某种原因，当我从帮助文本获得时，bash完成不起作用。我知道这听起来很神秘，但请进一步阅读以了解我。 这是我的命令可执行文件放置在其中一个
- 如何在不等待newline的情况下从C中读取终端的输入？ 我在macos上。我如何在不等待新线的情况下阅读输入？我想制作具有标准WASD控件的基于ASCII的RPG，因此我需要同时阅读多个字符以说明
- 取出平坦阵列中所有字符串的前缀并将其用作钥匙，然后按键排序 我有这个数组： 大批 （（ 0 =>“ 3_some val”， 1 =>“ 1_some其他val”， 2 =>“ 0_val”， 3 =>“ 2_value”， 4 ...
- 有另一种方法可以使用Python 3.13.1？
- 接管管输出和子壳的副作用
- 为什么要使用Express而不是AngularJS？
- 将一个平坦的阵列转换为带有预定键的关联行阵列
- 简单的PHP阵列操作
- 我如何在生产中使用HTTPS启动NextJS应用？
- 如何正确地将_mm_hadd_epi32转换为等效的C ++代码（WASM_SIMD128.H）使用Emscripten？
- 如何将图像上传到repl。 我正在研究一个学校视频游戏项目，我正在与朋友一起编码游戏。因为我在学校笔记本电脑上工作，所以我无法下载python，所以我使用repl。我的朋友制作了图形...
- 在同一列中分离田间
- MicrosoftGraph Delete事件，标记为取消 我知道在事件/删除的文档中所述： 如果活动是一次会议，则在组织者日历上删除活动将向会议参与者发送取消消息。 H ...