如何在HighCharts中设置两个不同图例的样式 [英] How to style two different legends in HighCharts
问题描述
我在HighCharts中设置图例的两个不同符号的样式时遇到问题. 也许有人知道如何正确编写我的代码，或者对我的问题有一些想法. 我还需要编写没有jquery的代码.
I have a problem with styling two different symbols of the legend in the HighCharts. Maybe someone know how to write my code correctly, or have some ideas for my problem. I also need to write it without jquery.
谢谢，祝你有美好的一天！ 我需要像在图片中一样对它们进行样式设置
Thanks and have a good day! I need to style them like in a picture
我的代码现在看起来像:
My code now if looking like :
const dataX = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6];
const dataXY = [27.0,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9, 9.6];
let maxX = dataX.reduce((max, val) => (max > val ? max : val), dataX[0]);
let minX = dataX.reduce((max, val) => (max < val ? max : val), dataX[0]);
let minXY = dataXY.reduce((max, val) => (max < val ? max : val), dataXY[0]);
let maxXY = dataX.reduce((max, val) => (max > val ? max : val), dataXY[0]);
proxy(FL_BEST_TIME_BIG, container => {
Highcharts.chart(container, {
chart: {
scrollablePlotArea: {
minWidth: window.innerWidth < 767 ? 767 : null,
scrollPositionX: 0,
marginTop: 20
},
spacingBottom: 100
},
credits: {
enabled: false
},
subtitle: {
text: null
},
xAxis: [
{
endOnTick: true,
startOnTick: true,
gridLineColor: "#EDEDED",
min: 0,
labels: {
format: "{value}",
style: {
color: "#8F969A",
fontSize: 11,
fontFamily: "Roboto"
}
},
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
}
],
yAxis: [
{
title: {
text: ""
},
// Primary yAxis
labels: {
enabled: false
}
},
{
// Secondary yAxis
title: {
text: null,
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: "{value} грн",
style: {
color: "#8F969A",
fontSize: 11,
fontFamily: "Roboto"
},
enabled: window.innerWidth > 767 ? true : false
},
opposite: true
}
],
labels: {
items: [
{
html: "Цена",
style: {
top: "50px",
left: "60px",
fontWeight: "bold",
color: "#292C2E",
fontSize: "16px",
fontFamily: "Roboto"
}
},
{
html: minX + " - " + maxX + " грн",
style: {
top: "70px",
left: "20px",
fontWeight: "bold",
color: "#292C2E",
fontSize: "14px",
fontFamily: "Roboto"
}
},
{
html: "Tемпература",
style: {
top: "50px",
left: "180px",
fontWeight: "bold",
color: "#292C2E",
fontSize: "16px",
fontFamily: "Roboto"
}
},
{
html: minXY + " - " + maxXY + " °C",
style: {
top: "70px",
left: "180px",
fontWeight: "bold",
color: "#292C2E",
fontSize: "14px",
fontFamily: "Roboto"
}
}
]
},
legend: {
align: "left",
itemDistance: 62,
squareSymbol: false,
alignColumns: false,
itemHoverStyle: {
color: "#292C2E"
},
itemStyle: {
fontFamily: "Roboto",
fontWeight: "bold",
fontSize: 16,
color: "#292C2E"
}
},
plotOptions: {
column: {
animation: false,
dataLabels: {
enabled: false
},
states: {
inactive: {
opacity: 1
},
hover: {
enabled: false //disable changibg backgcol by hover
}
},
borderRadiusTopLeft: 5,
borderRadiusTopRight: 5,
groupPadding: 0.01,
pointPadding: 0
},
series: {
lineWidth: 4,
marker: {
lineWidth: 0, //here
lineColor: null, // inherit from series
fillColor: null,
enabled: false,
states: {
hover: {
enabled: true
}
}
},
states: {
inactive: {
opacity: 1
}
}
}
},
series: [
{
name: "", //hover
type: "column",
yAxis: 1,
color: "#28B2FF",
hover: {
enabled: false
},
data: dataX,
tooltip: {
valueSuffix: " грн"
}
},
{
name: "", //hover TEMP
type: "spline",
color: "#FFBD46",
pointStart: 0,
hover: {
enabled: false
},
data: dataXY,
tooltip: {
valueSuffix: "°C"
}
}
]
});
});
}
推荐答案
请注意，不推荐使用 labels.items 功能，因此不建议使用该功能. https://api.highcharts.com/highcharts/labels.items
Please notice that labels.items feature is deprecated, so it is not recommended to use it. https://api.highcharts.com/highcharts/labels.items
因此，首先，我认为将所需名称保留在系列对象中会更好，因为它将在图例组中呈现并保留隐藏/显示功能.
So, first, I think that it is better to keep the wanted name in the series object because it will be rendered in the legend group and will keep hide/show functionalities.
我的意思是:
{
name: "Tемпература", //hover TEMP
type: "spline",
color: "#FFBD46",
pointStart: 0,
hover: {
enabled: false
},
data: dataXY,
tooltip: {
valueSuffix: "°C"
}
}
下一步-我注意到列系列图例符号被渲染为圆形.为避免创建空序列，请在列序列中使用 linkedTo 功能将其附加到上一个序列.
Next - I notice that column series legend symbol is rendered as a circle. To avoid it create an empty series and in the column series use the linkedTo feature to attach it to the previous one.
series: [{
name: "Цена"
},
{
linkedTo: ":previous",
name: "Цена", //hover
type: "column",
yAxis: 1,
color: "#28B2FF",
hover: {
enabled: false
},
data: dataX,
tooltip: {
valueSuffix: " грн"
}
},
我还在渲染功能内创建了一个自定义函数，该函数将定位图例名称并创建底部标签.
I created also a custom function inside the render feature which will be positioning the legend name and creating the bottom label.
请参阅演示: https://jsfiddle.net/BlackLabel/mx6snvqr/
API: https://api.highcharts.com/highcharts/chart.events .render
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
API: https://api.highcharts.com/highcharts/series.line .linkedTo
这篇关于如何在HighCharts中设置两个不同图例的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
