javascript - 绘图范围不限于 x 轴，绘制整个图表

Question

我正在尝试创建一个仅限于一个 Pane 的绘图带。我的图表是日期时间图表，其中多个 Pane 绑定(bind)到一个 xAxis。我想做的是为单个 Pane 添加绘图带，这样它就不会覆盖整个图表。但我的代码产生了这个结果:(我刚刚在第一个要测试的图表上添加了绘图带)

const option = {
    labels: {
        align: "right",
        x: -3
    },
    title: {
        text: tagName,
        style: {
            color: colors[checkedTagNames.indexOf(tag)],
            fontWeight: "500",
            fontSize: "1em",
            fontFamily: "monospace"
        },
        useHTML: true
    },
    top: top * index + "%",
    height: (1 / tagOrder.length) * 100 + "%",
    lineWidth: 2,
    gridLineWidth: 0,
    offset: index % 2 === 0 ? 0 : 40,
    name: tag
};

// const plotBands = [

// ];

const plotBandOption =
    index === 0
        ? [
                {
                    // mark the weekend
                    color: "rgba(232, 48, 48, 0.38)",
                    from: moment(tagData[1 + index * 10].timestamp).valueOf(),
                    to: moment(tagData[3 + index * 10].timestamp).valueOf()
                }
          ]
        : [];

const xOption = {
    type: "datetime",
    top: top * index + "%",
    height: (1 / tagOrder.length) * 100 + "%",
    name: "x" + tag,
    // visible: true,
    plotBands: plotBandOption,
    linkedTo: 0,
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: "transparent",
    minorTickLength: 0,
    tickLength: 0,
    labels: {
        enabled: false
    }
};

const seriesOption = {
    type: "line",
    name: tag,
    yAxis: index + 1,
    data: extractData(tagData),
    zoneAxis: "x",
    zones: testZones,
    color: colors[index % 10],
    step: true,
    dataGrouping: { enabled: false },
    tooltip: {
        pointFormatter: function() {
            const color = colors[index] ? colors[index] : "";
            const unit = checkedTags[index] ? checkedTags[index].engUnit : "";

            return (
                '<span style="color:' +
                color +
                '">' +
                this.series.name +
                "</span>: <br/> <strong>" +
                +this.y.toFixed(3) +
                " " +
                unit +
                "</strong>"
            );
        }
    }
};

chart.addAxis(option, false, false);
chart.addAxis(xOption, true, false);
chart.addSeries(seriesOption);

Answer 1

您可以为每个系列创建带有绘图线的单独 xAxis，并仅保留一个轴可见。

yAxis: [{
  height: '40%',
  gridLineWidth: 0,
  labels: {
    enabled: false
  },
}, {
  gridLineWidth: 0,
  labels: {
    enabled: false
  },
  height: '40%',
  top: '60%'
}],
xAxis: [{
  labels: {
    enabled: false
  },
  tickLength: 0,
  lineWidth: 0,
  plotLines: [{
    value: 1,
    width: 1,
    color: 'blue'
  }],
  height: '40%'
}, {
  top: '60%',
  height: '40%',
  plotLines: [{
    value: 4,
    width: 1,
    color: 'red'
  }],
}]

现场演示:http://jsfiddle.net/BlackLabel/kspfu6rb/

另一个解决方案是使用 Highcharts.SVGRenderer 创建模仿plotLines 的线条。

API引用:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer