javascript - 如何在 HighCharts 中设置两个不同图例的样式

Question

我在设置 HighCharts 中图例的两个不同符号的样式时遇到问题。也许有人知道如何正确编写我的代码，或者对我的问题有一些想法。我还需要不用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"
            }
          }
        ]
      });
    });
  }

Answer 1

请注意，labels.items 功能已弃用，因此不建议使用它。 https://api.highcharts.com/highcharts/labels.items

因此，首先，我认为最好将所需的名称保留在系列对象中，因为它将在图例组中呈现并保留隐藏/显示功能。

我的意思是:

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

下一步 - 我注意到列系列图例符号呈现为圆形。为了避免它创建一个空系列，并在列系列中使用 linkedTo 功能将其附加到前一个系列。

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

我还在渲染功能中创建了一个自定义函数，它将定位图例名称并创建底部标签。

查看演示: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