reactjs - Highstocks 带有单个导航器的多个图表 + 导航器外部的标签 + 自定义导航器句柄符号

Question

图 1. 所需设计

图 2. 我目前的设计

嗨，我需要根据图像 (1) 中的设计创建一个 highstock 图表。目前我的设计看起来像图片 (2) 中的设计。目前图像（2）中的导航器仅适用于底部的图表（以下代码中的“options_six”）。我的所有谷歌搜索都遇到了死胡同，需要以下 3 点的帮助（标题中也提到）：

1. 如图所示，如何为 2 个图表制作一个通用导航器？
2. x 轴标签显示在导航器内部而不是外部，如设计中所示
3. 如何将 svg 图标作为 navigator.handle.symbols 的符号。该图标保存在我的项目文件夹中。

我使用打字稿作为我的项目语言。我的代码如下：

以下是 2 个图表的选项：

    const options_five = {
    chart: {
      type: "line",
      borderColor: "transparent",
      borderWidth: 1,
      borderRadius: "0.625rem",
      spacing: [10, 40, 10, 0],
      height: "17%",
    },

    title: { text: "" },
    credits: {
      enabled: false,
    },
    xAxis: {
      tickLength: 0,
      labels: {
        enabled: false,
        // formatter: function ():any {
        //   const that: any = this;
        //     if (that.isLast || that.isFirst) 
        //       return that.value;
        // },
      },
      plotBands: [
        {
          // mark the weekend
          color: "rgba(214,220,230,1)",
          from: Date.UTC(2010, 0, 30),
          to: Date.UTC(2010, 0, 20),
        },
      ],
      tickInterval: 24 * 3600 * 1000, // one day
      type: "datetime",
    },
    yAxis: {
      lineColor: "#ccd2d6",
      lineWidth: 1,
      tickLength: 5,
      tickWidth: 1,
      gridLineWidth: 0,
      title: {
        text: 'GPM',
        style:{
          color:"#349ee0",
        }
      },
      labels: {
        enabled: true,
        formatter: function ():any {
          const that: any = this;
            if (that.isLast || that.isFirst) 
            return `<div style="color:#349ee0">${that.value}</div>`;
      },
      },
    },
    legend: {
      enabled: false,
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false,
        },
      },
    },
    series: graphOne,
  }
  const options_six = {
    chart: {
      type: "line",
    //   scrollablePlotArea: {
    //     minWidth: 700,
    //     scrollPositionX: 1
    // },
      borderColor: "transparent",
      borderWidth: 1,
      borderRadius: "0.625rem",
      spacing: [10, 40, 0, 0],
      height: "23%",
      zoomType:"x",
      panning:true,
    },
    navigator:{
      height: 20,
      maskInside: true,
      maskFill:"transparent",
      threshold:10,
      outlineColor:"#ccd2d6",
      outlineWidth: 2,
      handles:{
        symbols: [slider_handle, slider_handle],
        height: 20,
        width: 10,
      },
      series: {
          lineWidth: 0,
          fillOpacity: 0,

      },
      xAxis:{
        labels: {
          enabled: true,
          useHTML:true,
          step:0,
          style:{
            
          },
          formatter: function ():any {
            const that: any = this;
            // console.log(that)
              if (that.isLast)
                return `<div style="margin-right:3rem;color:#405469">${moment(that.value).format("MMM-DD-YYYY HH:mm").toString()}</div>`;
              else if (that.isFirst) 
                return `<div style="margin-left:-3rem;color:#405469">${moment(that.value).format("MMM-DD-YYYY HH:mm").toString()}</div>`;
          },
        },
        plotBands: [
          {
            // mark the weekend
            color: "rgba(214,220,230,1)",
            from: Date.UTC(2010, 0, 30),
            to: Date.UTC(2010, 0, 20),          },
        ],
      }
    },
    rangeSelector: {
      enabled: false,
    },
    scrollbar:{
      enabled: false,
    },
    title: { text: "" },
    credits: {
      enabled: false,
    },
    xAxis: {
      labels: {
        enabled: false,
        useHTML:true,
        style:{
          width:'max-content',
          display:'flex',
        },
        formatter: function ():any {
          const that: any = this;
          // console.log(moment(that.value).format("MMM-DD-YYYY"))
          if (that.isFirst) 
            return `<div style="margin-left:6rem;color:#405469">${moment(that.value).format("MMM-DD-YYYY HH:mm").toString()}</div>`;
        },
        padding:0,
        step:1,
        rotation:0,
      },
      plotBands: [
        {
          // mark the weekend
          color: "rgba(214,220,230,1)",
          from: Date.UTC(2010, 0, 30),
          to: Date.UTC(2010, 0, 20),
        },
      ],
      tickLength: 0,
      tickInterval: 24 * 3600 * 1000, // one day
      type: "datetime",
    },
    yAxis: {
      lineColor: "#ccd2d6",
      lineWidth: 1,
      tickLength: 5,
      tickWidth: 1,
      gridLineWidth: 0,
      opposite:false,
      showLastLabel:true,
      title: {
        text: '(°F)',
        style:{
          color:"#89cb2d",
        }
      },
      labels: {
        enabled: true,
        formatter: function ():any {
          const that: any = this;
            if (that.isLast || that.isFirst) 
              return `<div style="color:#89cb2d">${that.value}</div>`;
          },
      },
    },
    legend: {
      enabled: false,
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false,
        },
      },
    },
    
    series: graphTwo,
    // series: {
    //   data:graphSeries,
    //   color: '#FF0000',
    // },
  };

下面是我的渲染函数，它以网格形式返回图表：

      <Grid container direction="column">
        <Grid
          item
          // className={classes.splitLanesGraphs}
          xs={12}
          sm={12}
          md={12}
          lg={12}
          xl={12}
        >
          <Chart ref={chartRef} options={options_five} constructorType={'chart'} />
        </Grid>
        <Grid
          item
          // className={classes.splitLanesGraphs}
          xs={12}
          sm={12}
          md={12}
          lg={12}
          xl={12}
        >
          <Chart ref={chartRef} options={options_six} constructorType={'stockChart'}/>
        </Grid>
      </Grid>

下面是我在单独文件中创建的图表组件：

    import React from "react";
import * as Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import NoDataToDisplay from "highcharts/modules/no-data-to-display";
import Boost from "highcharts/modules/boost";


interface Iprops {
  options: any;
  boost?: boolean;
  removeNoDataMessage?: boolean;
  constructorType?:string;
}
export const Chart = React.forwardRef((props: Iprops, ref: any) => {
  const {constructorType, options, boost, removeNoDataMessage } = props;

    if (!removeNoDataMessage) {
      NoDataToDisplay(Highcharts);
    }

  return (
    <HighchartsReact
      ref={ref}
      options={options}
      highcharts={boost ? Boost(Highcharts) : Highcharts}
      constructorType={constructorType}
    />
  );
});

标签： reactjstypescriptchartshighchartsreact-highcharts