Question

我正在尝试创建一个如下图所示的仪表。 enter image description here

我尝试了一些不同的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/

构建一个仪表以显示颜色范围的百分比值

1 个答案: