高圖儀表與面積圖的組合

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

...

不幸的是，感覺就像chart.polar設置僅適用於圖表級別，而不是按序列（...）

是的，你是對的。 在同一圖表中，不能使用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/