将 Highcharts 仪表与面积图相结合答案

【问题标题】：Combining Highcharts Gauge with Area Chart将 Highcharts 仪表与面积图相结合
【发布时间】：2018-11-15 10:29:15
【问题描述】：

我希望将 highcharts 仪表与非极坐标图（例如面积）结合起来。我创建了两组单独的 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 设置仅适用于图表级别，而不是按系列。这会导致图表对于所有窗格和轴都是极性的，正确显示仪表但错误的区域，或者不是极性的，正确显示区域但不显示仪表。

有没有办法将仪表（或任何关于此的 highcharts 极坐标图）和非极坐标 highcharts 图表（例如面积）组合在一个图表中？还是我坚持创建两个图表并重叠 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]
  }*/
]

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

【问题讨论】：

恐怕你将不得不使用两个图表。将图表类型设置为极坐标会更改图表的构建方式，不仅是系列，还有轴、网格等。我能想到的唯一其他选择是使用 SVG 绘制您感兴趣的仪表部分。

标签： javascript highcharts

【解决方案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/

【讨论】：