Question

我正在尝试创建一个仅限于一个窗格的绘图区。我的图表是日期时间图表，其中多个窗格绑定到一个xAxis。我想做的是为单个窗格添加绘图区，以使其不覆盖整个图表。但是我的代码产生了以下结果：（我刚刚在第一个图形上添加了绘图带进行测试）

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

您可以为每个系列使用plotLines创建单独的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

绘图带不限于xAxis，可绘制整个图形

1 个答案: