建設量表以顯示顏色的百分比值範圍

Question

我想創建如下面的圖像中的測量儀。

我嘗試了一些不同的Highcharts選項，但這些值看起來不正確。下面是與我使用的代碼fiddle。

$(function() { 
    $("#container").highcharts({ 
     "chart": { 
      "height": 250, 
      "renderTo": "container", 
      "plotBackgroundColor": null, 
      "plotBackgroundImage": null, 
      "plotBorderWidth": 0, 
      "plotShadow": false, 
      "backgroundColor": "transparent" 
     }, 
     "credits": { 
      "enabled": false 
     }, 
     "tooltip": { 
      "enabled": false 
     }, 
     "title": { 
      "useHtml": true, 
      "text": "<div style=\"font-size: 24px;\">99%</div><br><div style=\"font-size: 12px;\" \"font-size: 12px;\"></div>", 
      "align": "center", 
      "verticalAlign": "top", 
      "y": 100, 
      "useHtml": true 
     }, 
     "subtitle": { 
      "useHtml": true, 
      "text": "<div style=\"font-size: 13px;\"></div>", 
      "align": "center", 
      "verticalAlign": "top", 
      "y": 175, 
      "useHtml": true 
     }, 

     "pane": { 
      "size": "78%", 
      "startAngle": -140, 
      "endAngle": 140, 
      "background": { 
       "borderWidth": 0, 
       "backgroundColor": "transparent", 
       "innerRadius": "100%", 
       "outerRadius": "100%", 
       "shape": "arc" 
      } 
     }, 
     "yAxis": [{ 
      "lineWidth": 0, 
      "min": 0, 
      "max": 125, 
      "minorTickLength": 0, 
      "tickLength": 0, 
      "tickWidth": 0, 
      "labels": { 
       "enabled": false 
      }, 
      "title": { 
       "text": "", 
       "useHTML": false, 
       "y": 80 
      }, 
      "pane": 0 
     }], 
     "plotOptions": { 
      "series": { 
       "enableMouseTracking": false 
      }, 
      "pie": { 
       "dataLabels": { 
        "enabled": true, 
        "distance": 0, 
        "style": { 
         "fontWeight": "bold", 
         "color": "white", 
         "textShadow": "0px 1px 2px black" 
        } 
       }, 
       "startAngle": -140, 
       "endAngle": 140 
      }, 
      "gauge": { 
       "dataLabels": { 
        "enabled": false 
       }, 
       "pivot": { 
        "radius": 75, 
        "borderWidth": 1, 
        "borderColor": "transparent", 
        "backgroundColor": "white" 
       }, 
       "dial": { 
        "radius": "110%", 
        "backgroundColor": "white", 
        "borderColor": "gray", 
        "baseWidth": 140, 
        "topWidth": 1, 
        "baseLength": "5%", 
        "rearLength": "5%" 
       } 
      } 
     }, 

     "series": [ 
      { 
       "type": "pie", 
       "name": "Risk", 
       "innerSize": "80%", 
       "data": [ 
        { 
         "y": 99, 
         "name": "0-74 percent", 
         "color": "#FA524D" 
        }, { 
         "y": 74, 
         "name": "75-99 percent", 
         "color": "#F3D307" 
        }, { 
         "y": 10, 
         "name": ">99 percent", 
         "color": "#9DC546" 
       }] 
      }, 
      { 
       "type": "gauge", 
       "name": "Success", 
       "data": [99], 
       "dial": { 
        "rearLength": 0 
       } 
      } 
     ], 
    }); 
}); 

我該如何做到這樣的測量圖？

Answer 1

我使用固體計+計圖表來實現的結果。有些值是硬編碼的，但根據您的需要，可以動態調整。

$(function() { 
var tickPositions = [10, 240, 260, 485, 520, 740, 760, 990]; 
var values = [0, 250, 251, 500, 501, 750, 751, 1000]; 

angles = tickPositions.map(function (value) { 
    return getAngle(value); 
}) 

function getAngle(value) { 
    var angle = value * 135/500 - 45; 
    return angle > 90 ? -180 + angle : angle; 
} 


var labels = (function() { 
var labels = {}; 
tickPositions.forEach(function(value, i) { 
    labels[value] = { 
    text: values[i], 
    }; 
}); 
return labels; 
})(); 

Highcharts.chart('container', { 
chart: { 
    events: { 
    load: function() { 
     var labels = document.getElementsByClassName('highcharts-yaxis-labels')[1].children; 
     Array.prototype.forEach.call(labels, function(label, i) { 
     var x = label.getAttribute('x'), 
      y = label.getAttribute('y'), 
      transform = label.getAttribute('transform'); 

     label.setAttribute('transform', transform + ' rotate(' + angles[i] + ' ' + x + ' ' + y + ')'); 
     }); 
    } 
    } 
}, 

pane: [{ 
    startAngle: -135, 
    endAngle: 135, 
    background: [{ 
    innerRadius: '80%', 
    outerRadius: '100%', 
    shape: 'arc' 
    }] 
}, { 
    size: '67%', 
    background: [], 
    startAngle: -135, 
    endAngle: 135 
}], 

yAxis: [{ 
    lineWidth: 5, 
    lineColor: 'white', 
    tickLength: 50, 
    tickWidth: 5, 
    minorTickLength: 0, 
    tickColor: 'white', 
    tickPositions: [250.5, 500.5, 750.5], 
    labels: { 
    enabled: false 
    }, 
    min: 0, 
    max: 1000, 
    zIndex: 6, 
    stops: [ 
    [0.2505, 'red'], 
    [0.5005, 'orange'], 
    [0.7505, 'yellow'], 
    [1, 'green'] 
    ] 
}, { 
    linkedTo: 0, 
    lineWidth: 0, 
    minorTickInterval: null, 
    tickLength: 0, 
    tickPositions: tickPositions, 
    zIndex: 6, 
    labels: { 
    style: { 
     color: 'white' 
    }, 
    formatter: function() { 
     return labels[this.value].text; 
    } 
    } 
}, { 
    pane: 1, 
    lineColor: 'white', 
    lineWidth: 10, 
    zIndex: 6 
}], 

series: [{ 
    // animation: false, 
    type: 'solidgauge', 
    data: [1000, 750, 500, 250], 
    radius: '100%', 
    innerRadius: '80%', 
    dataLabels: { 
    enabled: false 
    }, 
    enableMouseTracking: false, 
    borderWidth: 0 
}, { 
    enableMouseTracking: false, 
    type: 'gauge', 
    data: [630], 
    pivot: { 
    radius: 150, 
    backgroundColor: 'orange' 
    }, 
    dial: { 
    radius: "100%", 
    backgroundColor: "white", 
    baseWidth: 140, 
    topWidth: 1, 
    baseLength: "1%", 
    rearLength: "5%" 
    }, 
    dataLabels: { 
    zIndex: 6, 
    borderWidth: 0, 
    style: { 
     fontSize: '100px' 
    }, 
    y: -75 
    } 
}] 

}); 
}); 

例如：https://jsfiddle.net/wjg01t6w/