Javascript 如何在海图中设置两个不同图例的样式

我有一个问题，在设计两个不同的符号的传奇在高图表。 也许有人知道如何正确编写我的代码，或者对我的问题有一些想法。 我还需要在没有jquery的情况下编写它

谢谢，祝你今天愉快！ 我需要把它们做成照片的样式

如果我的代码看起来像：

 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"
            }
          }
        ]
      });
    });
  }

constdatax=[49.9,71.5106.4129.2144.0176.0135.6148.51216.4194.1,95.6]；
常数dataXY=[27.0,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]；
设maxX=dataX.reduce（（max，val）=>（max>val？max:val），dataX[0]）；
设minX=dataX.reduce（（max，val）=>（max（max（max>val？max:val），dataXY[0]）；
代理（FL\u最佳\u时间\u大，容器=>{
海图。海图（容器{
图表：{
可滚动绘图区：{
minWidth:window.innerWidth<767？767:null，
位置X:0，
玛金托普：20
},
间距：100
},
学分：{
已启用：false
},
副标题:{
文本：空
},
xAxis：[
{
恩东蒂克：是的，
是的，
网格线颜色：“#EDEDED”，
分:0,，
标签：{
格式：“{value}”，
风格：{
颜色：“8F969A”，
尺寸：11，
fontFamily：“机器人”
}
},
类别：[
“简”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”，
“九月”，
“十月”，
“11月”，
“十二月”
]
}
],
亚克斯：[
{
标题：{
案文：“”
},
//初级牙轴
标签：{
已启用：false
}
},
{
//次级牙轴
标题：{
文本：空，
风格：{
颜色：Highcharts.getOptions（）.color[0]
}
},
标签：{
格式：“{value}Γрц”，
风格：{
颜色：“8F969A”，
尺寸：11，
fontFamily：“机器人”
},
启用：window.innerWidth>767？真：假
},
相反：对
}
],
标签：{
项目：[
{
html：“аааа”，
风格：{
顶部：“50px”，
左：“60px”，
fontWeight：“粗体”，
颜色：“292C2E”，
字体大小：“16px”，
fontFamily：“机器人”
}
},
{
html:minX+“-”+maxX+“Гааа”，
风格：{
顶部：“70px”，
左：“20px”，
fontWeight：“粗体”，
颜色：“292C2E”，
字体大小：“14px”，
fontFamily：“机器人”
}
},
{
html：“Tааааааааа”，
风格：{
顶部：“50px”，
左：“180px”，
fontWeight：“粗体”，
颜色：“292C2E”，
字体大小：“16px”，
fontFamily：“机器人”
}
},
{
html:minXY+“-”+maxXY+“°C”，
风格：{
顶部：“70px”，
左：“180px”，
fontWeight：“粗体”，
颜色：“292C2E”，
字体大小：“14px”，
fontFamily：“机器人”
}
}
]
},
图例：{
对齐：“左”，
项目距离：62，
正方形符号：false，
alignColumns:false，
项目悬停样式：{
颜色：“292C2E”
},
项目样式：{
fontFamily：“机器人”，
fontWeight：“粗体”，
尺寸：16，
颜色：“292C2E”
}
},
打印选项：{
专栏：{
动画：错，
数据标签：{
已启用：false
},
国家：{
非活动：{
不透明度：1
},
悬停：{
启用：false//通过悬停禁用changibg backgcol
}
},
边界半径左：5，
边界半径右侧：5，
分组填充：0.01，
点填充：0
},
系列：{
线宽：4，
标记：{
线宽：0，//此处
lineColor:null，//从系列继承
fillColor:null，
启用：false，
国家：{
悬停：{
已启用：true
}
}
},
国家：{
非活动：{
不透明度：1
}
}
}
},
系列：[
{
名称：，//悬停
键入：“列”，
亚克西斯:1,，
颜色：“28B2FF”，
悬停：{
已启用：false
},
数据：dataX，
工具提示：{
valueSuffix:“ГПа”
}
},
{
名称：，//悬停温度
类型：“样条曲线”，
颜色：“FFBD46”，
起点：0，
悬停：{
已启用：false
},
数据：dataXY，
工具提示：{
valueSuffix:“C”
}
}
]
});
});
}

{
  name: "Tемпература", //hover TEMP
  type: "spline",
  color: "#FFBD46",
  pointStart: 0,
  hover: {
    enabled: false
  },
  data: dataXY,
  tooltip: {
    valueSuffix: "°C"
  }
}

 series: [{
      name: "Цена"
    },
    {
      linkedTo: ":previous",
      name: "Цена", //hover
      type: "column",
      yAxis: 1,
      color: "#28B2FF",
      hover: {
        enabled: false
      },
      data: dataX,
      tooltip: {
        valueSuffix: " грн"
      }
    },