2016-12-28 28 views
0

我正在使用角度测量仪在Highcharts 两个拨号,实施为两个系列。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样式模式将设置所有拨号到相同的颜色。

对此提出建议?

回答

0

你需要设置它这样,

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

0

没关系啊,意识到我需要添加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' 
      } 
    }] 

},