Question

我希望将高图仪表与面积等非极性图表结合起来。我创建了两个分别的x轴和y轴集，以及两个窗格，并将它们分配给相关的系列。

pane: [undefined,
  {
    startAngle: -90,
    endAngle: 90,
    background: null,
    size: "50%",
    center: ["80%", "75%"]
  }
],
xAxis: [{
    type: "datetime",
    pane: 0
  },
  {
    pane: 1
  }
],
yAxis: [{
    title: {
      text: "Views"
    },
    min: 0,
    pane: 0,
    type: "linear"
  },
  {
    pane: 1,
    labels: {
      enabled: false
    },
    tickPositions: [],
    minorTickLength: 0,
    min: -10,
    max: 10,
    plotBands: [{
      from: -10,
      to: 3,
      color: 'rgb(192, 0, 0)', // red
      thickness: '50%'
    }, {
      from: 3,
      to: 5,
      color: 'rgb(255, 192, 0)', // yellow
      thickness: '50%'
    }, {
      from: 5,
      to: 10,
      color: 'rgb(155, 187, 89)', // green
      thickness: '50%'
    }]
  }
]

不幸的是，感觉就像chart.polar设置仅适用于图表级别，而不是按顺序。这会导致图表对所有窗格和所有轴都是极性的，从而正确显示了量规，但错误地显示了面积；或者不是极性的，从而正确地显示了面积但未显示量规。

是否有一种方法可以将仪表（或与此有关的任何高位图表极坐标图）和非极性高位图表（如面积）合并到单个图表中？还是我坚持创建两个图表并使div重叠？

启用量规的JSFiddle，根据数据生成2个量规： https://jsfiddle.net/stefaniev/jbx6cwLz/12/

series: [{
    name: "Series 1",
    data: [....],
    type: "area",
    "color": "rgba(240,240,240,0.01)",
    "pointStart": 1542153600000,
    "pointInterval": 900000,
    yAxis: 0,
    xAxis: 0
  },
  {
    "name": "Series 2",
    "data": [....],
    "type": "area",
    "color": "#09C98D",
    "pointStart": 1542153600000,
    "pointInterval": 900000,
    yAxis: 0,
    xAxis: 0
  },
  {
    type: 'gauge',
    name: 'Doing poorly',
    yAxis: 1,
    xAxis: 1,
    data: [-3]
  }
]

与JSFiddle相同，但标尺系列已被注释掉，面积图正确呈现： https://jsfiddle.net/stefaniev/jbx6cwLz/13/

series: [{
    name: "Series 1",
    data: [....],
    type: "area",
    "color": "rgba(240,240,240,0.01)",
    "pointStart": 1542153600000,
    "pointInterval": 900000,
    yAxis: 0,
    xAxis: 0
  },
  {
    "name": "Series 2",
    "data": [....],
    "type": "area",
    "color": "#09C98D",
    "pointStart": 1542153600000,
    "pointInterval": 900000,
    yAxis: 0,
    xAxis: 0
  },
 /* {
    type: 'gauge',
    name: 'Doing poorly',
    yAxis: 1,
    xAxis: 1,
    data: [-3]
  }*/
]

任何帮助或提示将不胜感激！

Answer 1

...

不幸的是，感觉就像是图表。   完全在图表级别，而不是按序列（...）

是的，您是对的。在同一图表中，不能使用polar和其他图表类型。在下面，您可以找到一个示例如何在单独的容器中创建这些类型的图表：

Highcharts.chart('container1', {
    series: [{
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }]
});

Highcharts.chart('container2', {
    chart: {
        type: 'gauge',
        height: 200,
        width: 200,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    yAxis: {
        min: 0,
        max: 200
    },
    pane: {
        startAngle: -150,
        endAngle: 150
    },
    series: [{
        data: [110]
    }]
});

实时演示：http://jsfiddle.net/BlackLabel/n54k3cpL/

高图仪表与面积图的组合

1 个答案: