規格圖與步驟的顏色

我怎樣才能達到這個使用高科技？累了使用站點：[...]但它不會像上面的圖像一樣工作。

yAxis: { 
      min: 0, 
      max: 100 
     }, 
     series: [{ 
      name: 'customers', 
      data: [{ 
       color: { 
// 
        linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0}, 
        stops: [ 
         [0.1, '#009a60'], 
         [0.2, '#4aa84e'], 
         [0.3, '#92b73a'], 
         [0.4, '#c6bf22'], 
         [0.5, '#edbd02'], 
         [0.6, '#ffad00'], 
         [0.7, '#ff8c00'], 
         [0.8, '#fc6114'], 
         [0.9, '#f43021'], 
         [1.0, '#ed0022'] 
        ] 
       }, 
       y:76 
      }], 
      dataLabels: { 
       format: '<div class="prc" style="text-align:center;"><span style="font-weight:normal; font-family:Helvetica Neue, Helvetica, Arial; font-size:52px;' + 
       '#333' + '">{y}</span>' 
      } 
     }]

來源

2016-10-20 max li

獲取此字符的一種方法是使用軸線和刻度線來覆蓋圖表以創建空白區域。接下來，您可以添加更多的點並使用漸變不支持的顏色格式設置站點 - 例如使用3位數的十六進制顏色格式（"#rgb"）。

演示：http://jsfiddle.net/bsdtsmyb/

$(function() { 
 

 
    var rawData = 94, 
 
    data = getData(rawData); 
 

 
    function getData(rawData) { 
 
    var data = [], 
 
     start = Math.round(Math.floor(rawData/10) * 10); 
 
    data.push(rawData); 
 
    for (i = start; i > 0; i -= 10) { 
 
     data.push({ 
 
     y: i 
 
     }); 
 
    } 
 
    return data; 
 
    } 
 

 
    Highcharts.chart('container', { 
 
    chart: { 
 
     type: 'solidgauge', 
 
     marginTop: 10 
 
    }, 
 
    
 
    title: { 
 
     text: '' 
 
    }, 
 
    
 
    subtitle: { 
 
     text: rawData, 
 
     style: { 
 
     'font-size': '60px' 
 
     }, 
 
     y: 200, 
 
     zIndex: 7 
 
    }, 
 

 
    tooltip: { 
 
     enabled: false 
 
    }, 
 

 
    pane: [{ 
 
     startAngle: -120, 
 
     endAngle: 120, 
 
     background: [{ // Track for Move 
 
     outerRadius: '100%', 
 
     innerRadius: '80%', 
 
     backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(), 
 
     borderWidth: 0, 
 
     shape: 'arc' 
 
     }], 
 
     size: '120%', 
 
     center: ['50%', '65%'] 
 
    }, { 
 
     startAngle: -120, 
 
     endAngle: 120, 
 
     size: '95%', 
 
     center: ['50%', '65%'], 
 
     background: [] 
 
    }], 
 

 
    yAxis: [{ 
 
     min: 0, 
 
     max: 100, 
 
     lineWidth: 2, 
 
     lineColor: 'white', 
 
     tickInterval: 10, 
 
     labels: { 
 
     enabled: false 
 
     }, 
 
     minorTickWidth: 0, 
 
     tickLength: 50, 
 
     tickWidth: 5, 
 
     tickColor: 'white', 
 
     zIndex: 6, 
 
     stops: [ 
 
     [0, '#fff'], 
 
     [0.101, '#0f0'], 
 
     [0.201, '#2d0'], 
 
     [0.301, '#4b0'], 
 
     [0.401, '#690'], 
 
     [0.501, '#870'], 
 
     [0.601, '#a50'], 
 
     [0.701, '#c30'], 
 
     [0.801, '#e10'], 
 
     [0.901, '#f03'], 
 
     [1, '#f06'] 
 
     ] 
 
    }, { 
 
     linkedTo: 0, 
 
     pane: 1, 
 
     lineWidth: 5, 
 
     lineColor: 'white', 
 
     tickPositions: [], 
 
     zIndex: 6 
 
    }], 
 
    
 
    series: [{ 
 
     animation: false, 
 
     dataLabels: { 
 
     enabled: false 
 
     }, 
 
     borderWidth: 0, 
 
     color: Highcharts.getOptions().colors[0], 
 
     radius: '100%', 
 
     innerRadius: '80%', 
 
     data: data 
 
    }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 
 

 
<div id="container" style="height: 300px;"> 
 
</div>

來源

2016-10-20 14:34:27

規格圖與步驟的顏色

回答

相關問題