HIGHCHARTS：图表图例周围的边框在底部被切断
问题描述 投票：0回答：1
我的图表图例周围的黑色细边框在底部被切断（下图）。
这发生在浏览器和 PNG 导出中。
该问题是由 adapt-chart-to-legend 插件引起的，如果没有该插件，图表会在垂直方向上变短并且在 y 轴上缺乏分辨率
参见https://jsfiddle.net/SirMunchington/vbt6q7rk/5/（代码如下）
无论图例中的图表元素数量如何，问题似乎仍然存在。
Highcharts.chart('container', {
"title": {
"text": "Goal Name: Test Goal #4",
"style": {
"color": "#274b6d",
"fontSize": "16px"
}
},
"subtitle": {
"text": "Scenario Name: New Try"
},
"colors": [
"#f28f43",
"#bc8321",
"#2f7ed8",
"#9370db",
"#1aadce",
"#8bbc21",
"#c42525"
],
"chart": {
"reflow": true,
"backgroundColor": "transparent",
"borderRadius": 5,
"events": {}
},
"plotOptions": {
"series": {
"label": {
"connectorAllowed": true
},
"pointStart": 2018,
"animation": false,
"enableMouseTracking": true,
"stickyTracking": false,
"shadow": false
},
"line": {
"animation": false,
"enableMouseTracking": true,
"shadow": false,
"marker": {
"enabled": true
}
}
},
"legend": {
"borderColor": "#000000",
"borderRadius": 5,
"borderWidth": 1,
"useHTML": true,
"adjustChartSize": true,
"itemHiddenStyle": {
"color": "#8e8e8e"
},
"itemStyle": {
"fontWeight": "normal",
"color": "#274b6d"
},
"itemDistance": 10,
"symbolRadius": 2,
"alignColumns": false
},
"credits": {
"enabled": false
},
"xAxis": {
"type": "datetime",
"labels": {},
"showLastLabel": false,
"tickPositions": [
1498892400000,
1530428400000,
1561964400000,
1593586800000,
1625122800000,
1656658800000,
1688194800000,
1719817200000,
1751353200000,
1782889200000
],
"endOnTick": true,
"startOnTick": true,
"maxPadding": 0,
"minPadding": 0,
"tickLength": 5,
"title": {
"text": "Fiscal Year",
"style": {
"color": "#4d759e",
"fontWeight": "bold"
}
},
"plotLines": [
{
"color": "rgba(0, 0, 0, 0.3)",
"width": 1,
"value": 1561964399999,
"dashStyle": "longdash"
},
{
"color": "rgba(0, 0, 0, 0.8)",
"width": 1,
"value": 1723558819561,
"dashStyle": "longdash"
},
{
"color": "rgba(100, 150, 100, 0.5)",
"width": 1,
"value": 1751342400000,
"dashStyle": "longdash"
},
{
"color": "#f28f43",
"width": 1,
"value": 1656648000000,
"dashStyle": "longdash"
}
]
},
"yAxis": {
"tickLength": 5,
"title": {
"text": "Annual Energy consumed (kWh)",
"style": {
"color": "#4d759e",
"fontWeight": "bold"
}
}
},
"series": [
{
"type": "line",
"name": "Consumption (Actual)",
"color": "#000000",
"lineWidth": 2,
"marker": {
"symbol": "circle"
},
"legendIndex": 1,
"tooltip": {
"valueDecimals": 0,
"outside": true,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[
1530428399999,
3500000
],
[
1561964399999,
750000
],
[
1561964399999,
123000
],
[
1593586799999,
64436656.991663404
],
[
1625122799999,
14653553.51
]
]
},
{
"type": "spline",
"name": "Projected consumption (Big Picture: Scenario + Background Projects)",
"color": "rgb(0, 88, 33)",
"marker": {
"symbol": "triangle-down"
},
"dashStyle": "Dash",
"legendIndex": 6,
"tooltip": {
"outside": true,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[
1726790400000,
-128904043.47014609
],
[
1726876800000,
-128904043.47014609
],
[
1770854400000,
-129011974.18085411
],
[
1770940800000,
-129011974.18085411
],
[
1771027200000,
-129011974.18085411
],
[
1771113600000,
-129011974.18085411
],
[
1771200000000,
-129011974.18085411
],
[
1771286400000,
-129011974.18085411
],
[
1771372800000,
-129011974.18085411
],
[
1771459200000,
-129011974.18085411
],
[
1771545600000,
-129011974.18085411
],
[
1771632000000,
-129011974.18085411
],
[
1771718400000,
-129011974.18085411
],
[
1771804800000,
-129011974.18085411
],
[
1771891200000,
-129011974.18085411
],
[
1771977600000,
-129011974.18085411
],
[
1772064000000,
-129011974.18085411
],
[
1772150400000,
-129011974.18085411
],
[
1772236800000,
-129011974.18085411
],
[
1772323200000,
-129011974.18085411
],
[
1772409600000,
-129011974.18085411
],
[
1772496000000,
-129011974.18085411
],
[
1772582400000,
-129011974.18085411
],
[
1772668800000,
-129011974.18085411
],
[
1772755200000,
-129011974.18085411
],
[
1772841600000,
-129011974.18085411
],
[
1772928000000,
-129011974.18085411
],
[
1773014400000,
-129011974.18085411
],
[
1773100800000,
-129011974.18085411
],
[
1773187200000,
-129011974.18085411
],
[
1773273600000,
-129011974.18085411
],
[
1773360000000,
-129011974.18085411
],
[
1773446400000,
-129011974.18085411
],
[
1773532800000,
-129011974.18085411
],
[
1773619200000,
-129011974.18085411
],
[
1773705600000,
-129011974.18085411
],
[
1773792000000,
-129011974.18085411
],
[
1773878400000,
-129011974.18085411
],
[
1773964800000,
-129011974.18085411
],
[
1774051200000,
-129011974.18085411
],
[
1774137600000,
-129011974.18085411
],
[
1774224000000,
-129011974.18085411
],
[
1774310400000,
-129011974.18085411
],
[
1774396800000,
-129011974.18085411
],
[
1774483200000,
-129011974.18085411
],
[
1774569600000,
-129011974.18085411
],
[
1774656000000,
-129011974.18085411
],
[
1774742400000,
-129011974.18085411
],
[
1774828800000,
-129011974.18085411
],
[
1774915200000,
-129011974.18085411
],
[
1775001600000,
-129011974.18085411
],
[
1775088000000,
-129011974.18085411
],
[
1775174400000,
-129011974.18085411
],
[
1775260800000,
-129011974.18085411
],
[
1775347200000,
-129011974.18085411
],
[
1775433600000,
-129011974.18085411
],
[
1775520000000,
-129011974.18085411
],
[
1775606400000,
-129011974.18085411
],
[
1775692800000,
-129011974.18085411
],
[
1775779200000,
-129011974.18085411
],
[
1775865600000,
-129011974.18085411
],
[
1775952000000,
-129011974.18085411
],
[
1776038400000,
-129011974.18085411
],
[
1776124800000,
-129011974.18085411
],
[
1776211200000,
-129011974.18085411
],
[
1776297600000,
-129011974.18085411
],
[
1776384000000,
-129011974.18085411
],
[
1776470400000,
-129011974.18085411
],
[
1776556800000,
-129011974.18085411
],
[
1776643200000,
-129011974.18085411
],
[
1776729600000,
-129011974.18085411
],
[
1776816000000,
-129011974.18085411
],
[
1776902400000,
-129011974.18085411
],
[
1776988800000,
-129011974.18085411
],
[
1777075200000,
-129011974.18085411
],
[
1777161600000,
-129011974.18085411
],
[
1777248000000,
-129011974.18085411
],
[
1777334400000,
-129011974.18085411
],
[
1777420800000,
-129011974.18085411
],
[
1777507200000,
-129011974.18085411
],
[
1777593600000,
-129011974.18085411
],
[
1777680000000,
-129011974.18085411
],
[
1777766400000,
-129011974.18085411
],
[
1777852800000,
-129011974.18085411
],
[
1777939200000,
-129011974.18085411
],
[
1778025600000,
-129011974.18085411
],
[
1778112000000,
-129011974.18085411
],
[
1778198400000,
-129011974.18085411
],
[
1778284800000,
-129011974.18085411
],
[
1778371200000,
-129011974.18085411
],
[
1778457600000,
-129011974.18085411
],
[
1778544000000,
-129011974.18085411
],
[
1778630400000,
-129011974.18085411
],
[
1778716800000,
-129011974.18085411
],
[
1778803200000,
-129011974.18085411
],
[
1778889600000,
-129011974.18085411
],
[
1778976000000,
-129011974.18085411
],
[
1779062400000,
-129011974.18085411
],
[
1779148800000,
-129011974.18085411
],
[
1779235200000,
-129011974.18085411
],
[
1779321600000,
-129011974.18085411
],
[
1779408000000,
-129011974.18085411
],
[
1779494400000,
-129011974.18085411
],
[
1779580800000,
-129011974.18085411
],
[
1779667200000,
-129011974.18085411
],
[
1779753600000,
-129011974.18085411
],
[
1779840000000,
-129011974.18085411
],
[
1779926400000,
-129011974.18085411
],
[
1780012800000,
-129011974.18085411
]
]
},
{
"type": "scatter",
"name": "Progress To Date (Projected)",
"color": "#000000",
"marker": {
"symbol": "circle",
"radius": 5
},
"legendIndex": 7,
"tooltip": {
"enabled": true,
"useHTML": true,
"outside": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[
1723558819561,
-128904043.47014609
]
]
},
{
"type": "scatter",
"name": "Primary Target",
"color": "#649664",
"marker": {
"symbol": "diamond",
"radius": 5
},
"legendIndex": 10,
"tooltip": {
"enabled": true,
"valueDecimals": 0,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[
1751342400000,
100000
]
]
}
],
"exporting": {
"chartOptions": {
"chart": {
"reflow": true,
"backgroundColor": "#ffffff"
}
},
"sourceWidth": 1250,
"sourceHeight": 500,
"scale": 2,
"fallbackToExportServer": false,
"buttons": {
"contextButton": {
"enabled": false
}
}
}
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://rawgithub.com/highcharts/adapt-chart-to-legend/master/adapt-chart-to-legend.js"></script>
<div id="container"></div>1个回答
0
投票
投票
我注意到，在你的情况下，问题仅在于一个像素。因此，在我看来，最简单的解决方案是将 translateY 值修正一个像素（下面演示中的第 28 行）。
演示：https://jsfiddle.net/BlackLabel/yapcx0bh/
else if (this.options.verticalAlign === 'bottom') {
translateY = chart.originalChartHeight; // #2
this.group.attr('translateY', translateY - 1);
if (this.group.alignAttr) {
this.group.alignAttr.translateY = translateY;
}
}
最新问题
- 如何在 Swing 中将 JScrollPane 与 JTextArea 结合使用？
- 将参数从 .cmd 传递到 .exe
- 如何将Bacnet集成到arduino中
- fs.watch 在 Electron 中不返回 FSWatcher 实例
- 如何从雪花中的字符串中查找year_month_date
- 带有单元格引用和通配符 (*) 的 Excel 公式搜索条件不包括单元格仅包含引用字符串的结果
- 读取 Twincat ADS EtherCAT 设备上 I/O 端子的状态
- 如何让nodejs应用程序端口从http转到https而不破坏默认的80/443访问路径？
- 如何在除 Google 表格中的三个选项卡之外的所有表格上运行 Google 表格应用脚本？
- 如何在 pandas 系列中用 at[] 替换 set_value
- 如何从GtkAda获取颜色？
- 在 Windows 上安装 pycddlib 构建轮子失败
- Databricks 中的 Redshift 查询比 Redshift 客户端中花费的时间更长
- 为什么定义名称前面的加号会影响封闭函数的结果？
- Tinymce 如何将图片的替代描述字段设为必填？
- 从毫秒转换为日期时间格式
- SD_MCC.remove() 函数在 ESP32CAM 上不起作用
- R stats `aov` 使用所有可用核心而不是仅一个
- Go 中如何区分 nil 错误值
- Apache Ignite 节点经常失败
© www.soinside.com 2019 - 2024. All rights reserved.