个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
如果我向 Apexchart 添加两个 Y 轴，它将被推到包装器之外，并且无法正确调整大小。我希望一个 Y 轴显示在图表左侧，另一个 Y 轴显示在图表右侧。
我尝试在我的开发工具中调试它，但我确信这本身就是一个 Canvas 问题。
我提供了下面的代码片段，其中显示了左侧 Y 轴和 Jan 数据如何超出范围。
var yearMapOptions = {
chart: {
fontFamily: "'Varela Round', sans-serif",
foreColor: '#2e1a6d',
toolbar: {
show: false
},
height: "100%",
stacked: false
},
colors: ['#2e1a6d', '#47bfb6', '#f37b94', '#ebf394'],
dataLabels: {
enabled: false
},
series: [{
name: 'Net Pips',
type: 'line',
data: [-10, 17, 39, -4, 63, -27, 55, 290, -83, 26, -45, 17],
}, {
name: 'Net Profit',
type: 'line',
data: [-35, 45, 190, -70, -50, 36, -80, 59, -29, 62, -65, 70]
}, {
name: 'Total Volume',
type: 'column',
data: [20, 60, 35, 57, 330, 30, 660, 58, 58, 230, 70, 120]
}, {
name: 'Total Trades',
type: 'column',
data: [6, 23, 11, 8, 33, 4, 57, 13, 13, 45, 17, 28]
}],
stroke: {
width: [3, 3, 3, 3],
curve: 'smooth'
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'August', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yaxis: [{
show: true,
seriesName: 'Net Pips',
opposite: true,
tickAmount: 2,
forceNiceScale: true,
axisTicks: {
show: false,
},
axisBorder: {
show: true,
color: '#00E396'
},
axisTicks: {
show: false,
borderType: 'solid',
color: '#47bfb6',
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: undefined,
style: {
color: '#00E396',
}
},
}, {
show: true,
seriesName: 'Net Profit',
opposite: false,
tickAmount: 2,
forceNiceScale: true,
axisTicks: {
show: true,
borderType: 'solid',
color: '#2e1a6d',
},
axisBorder: {
show: true,
color: '#FEB019'
},
labels: {
style: {
color: '#FEB019',
},
},
title: {
text: undefined,
style: {
color: '#FEB019',
}
},
}
],
plotOptions: {
bar: {
horizontal: false,
endingShape: 'rounded',
barheight: '100%'
}
},
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
grid: {
show: false
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetY: 10
}
};
var yearMapChart = new ApexCharts(
document.querySelector("#yearMap"),
yearMapOptions
);
yearMapChart.render();.apexcharts-yaxis, .apexcharts-xaxis-label {
font-weight: bold;
}
.yearMapWrapper {
height: 100%;
width: 80%;
margin-left: 10%;
}<html>
<body>
<div class="rowFiveCol2 layerStyles">
<div class="yearMapWrapper">
<div id="yearMap"></div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<html>最佳答案
删除 grid: { show: false } 使 y 轴可见。
PS:更改网格行为不应影响 y 轴。这似乎是 ApexCharts 中的一个错误，很快就会得到解决。
关于javascript - 当我插入两个 Y 轴时，Apexchart 会留下 wrapper ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59444419/
25
4
0
我正在尝试在 Apexcharts 中设置图表的高度，但无论我尝试什么，它似乎都只能在响应模式下工作。 任何的想法？ 这是一个 Codesandbox (这是他们文档中的基本示例，另外我还添加了高度)
我有这个 apexcharts 定义，当我得到的不仅仅是例如我系列的 300 个数据样本像这样在 xAxis 上重叠 虽然我更愿意看到这样的东西 选项“hideOverlapLabels”不起作用，因
如何通过单击工具提示访问顶点图表的数据值？ 我不想要索引。我需要值(value)。我如何访问该值？ var options = { chart: { type: 'line'
以下是一个带有由顶点图表组成的图表的角度应用程序 https://codesandbox.io/s/apx-column-distributed-d3ns7?from-embed 如何删除该图表的水平
我想在用户放大我的图表时调整列宽。你能建议任何方法或选项吗？我搜索了 documentation但我没有找到任何解决方案。到目前为止，我尝试通过更改条形宽度百分比、响应选项和笔划宽度来尝试。笔划有重叠
我的问题:图表大小是固定的，包括图例。 我想固定除图例以外的饼图大小。如何使饼图大小相同？ 这是我的代码。请帮助我 var options = { series: [25, 15,
如何更改 Apexcharts 中项目栏的最大宽度/高度？ (https://apexcharts.com/) 我有一个水平条形图，其数据是动态加载的，并且用户(项目)的数量会有所不同。当用户很少或只
我在使用 apexcharts 时遇到了情况当其中一列非常小时。渲染工具提示很困难，因为您必须非常小心地将列悬停。 问题 : 有没有办法扩展悬停区域，以便更容易悬停列？或者也许有一个选项可以在悬停整个
我正在尝试使用自定义参数在 apexCharts 热图中创建自定义工具提示以添加代码，在本例中为特定链接 tooltip: { custom: function({ s
我想在图表中添加箭头，我猜如果我能找到最高标记的位置，我可以用它来添加一些 html 以获得一些自定义工具提示或标记。我试着寻找一种格式 在标记和轴中发挥作用，我只是不确定我在这里寻找什么。任何帮助深
react-apexchart包中工具栏上的图标可以更改吗？ 例如，我想自定义顶点图表上工具栏菜单上的缩放和重置图标 最佳答案 在 chart.toolbar.tools 键中，您可以使用字符串而不是
首先 - 我对编程比较陌生。对不起。现在解决我的问题。 我们有一个来自 Apex 的面积图，每个轴大约有 11.000 个数据点。现在的问题是图表需要很长时间才能加载。即使更改范围，图表也需要很长时间
在“react-apexcharts”中创建图表时，我的理解是颜色应该被继承。但是，当使用颜色数组创建多个系列时，会设置图例而不是线条颜色。 Codepen 演示在这里。 https://codesa
首先 - 我对编程比较陌生。对不起。现在解决我的问题。 我们有一个来自 Apex 的面积图，每个轴大约有 11.000 个数据点。现在的问题是图表需要很长时间才能加载。即使更改范围，图表也需要很长时间
在“react-apexcharts”中创建图表时，我的理解是颜色应该被继承。但是，当使用颜色数组创建多个系列时，会设置图例而不是线条颜色。 Codepen 演示在这里。 https://codesa
我使用顶点图从 json 输出中进行简单的数据可视化。我的图表基于纯 JavaScript，而不是 Vue 或其他框架。 我的 json (php) 后端创建两个 json 输出来绘制图表，如下所示
我正在使用 apexcharts 来显示热图图表: 系列以 Date 对象命名，在 y 轴上的格式如下: yaxis: { labels: { formatter: funct
据我所知，我已经镜像了 ApexCharts 示例中所示的系列格式，但图表看起来确实不对。 我用我的测试数据和笨拙地呈现的图表制作了一个代码笔。我尝试过使用不同的日期格式，但它们都呈现相同的格式。 h
我正在尝试在我的 Apexcharts tooltip 中添加 %在Y值之后。我正在使用 vue.js，apexchart 没有提供官方文档。但我让它正常工作。这是我到目前为止所拥有的: data:
我使用 Apex 图表构建了此图表 但是“图表”标题和说明文字均未对齐，标题应相对于图表对齐，并且说明文字垂直对齐。 通过放置属性 align: 'center' 来对齐标题 但我的主要问题是在图例中
我是一名优秀的程序员,十分优秀！