Question

我在Highcharts中使用角度计，带有两个拨号，实现为两个系列。

如何为每个刻度盘设置不同的颜色以区分它们？

Highcharts.chart('container', {

    chart: {
        type: 'gauge',
        plotBorderWidth: 0,
        plotShadow: false
    },

    pane: {
        startAngle: -150,
        endAngle: 150,
    },

    // the value axis
    yAxis: {
        min: 1,
        max: 5,
    },

    series: [{
        name: 'Me',
        data: [1.1],
        color: '#DDDF0D'  // doesn't seem to work            
      }, {
        name: 'Average',
        data: [3.3],
      }]
},

}

CSS样式模式会将所有刻度盘设置为相同的颜色。

建议？

Answer 1

你需要像这样设置，

 yAxis: {
            min: 0,
            max: 100,
            stops: [
                [0.1, '#e74c3c'], // red
                [0.5, '#f1c40f'], // yellow
                [0.9, '#2ecc71'] // green
                ],
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            gridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
                enabled: false
            }

<强> DEMO

Answer 2

好的，我意识到我需要将yAxis添加到系列：

Highcharts.chart('container', {

chart: {
    type: 'gauge',
    plotBorderWidth: 0,
    plotShadow: false
},

pane: {
    startAngle: -150,
    endAngle: 150,
},

// the value axis
yAxis: {
    min: 1,
    max: 5,
},

series: [{
    name: 'Me',
    data: [1.1],
    yAxis: 0,
           dial: {
             backgroundColor: 'red'
           }
  }, {
    name: 'Average',
    data: [3.3],
    yAxis: 0,
           dial: {
             backgroundColor: 'green'
           }
  }]

}，

Highcharts角度计：多个不同颜色的表盘

2 个答案: