Highcharts 仪表 - 实心和不同的数据集答案

【问题标题】：High charts gauge-solid and different data setsHighcharts 仪表 - 实心和不同的数据集
【发布时间】：2017-10-08 07:20:17
【问题描述】：

我正在使用High charts gauge-solid。所以我需要在下面创建图表。你能告诉我如何为这张图表提供不同的data sets（每种颜色都有自己的数据）吗？

我需要的是这个：

这是我尝试过的：jsfiddle

$(function () {

    $('#gauge').highcharts({

        chart: {
            type: 'solidgauge',
            backgroundColor: 'transparent'
        },

        title: null,

        pane: {
            center: ['50%', '70%'],
            size: '130%',
            startAngle: -120,
            endAngle: 120,
            background: {
                backgroundColor: '#fff',
                innerRadius: '75%',
                outerRadius: '100%',
                shape: 'arc',
                borderColor: 'transparent'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        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
            },
            title: {
                enabled: false
            }
        },

        credits: {
            enabled: false
        },

        plotOptions: {
            solidgauge: {
                innerRadius: '75%',
                dataLabels: {
                    y: -45,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },

        series: [{
            data: [83],
            dataLabels: {
                format: '<p style="text-align:center;">{y}%</p>'
            }
        }]
    });

});

【问题讨论】：

这与角度有什么关系？为什么不先检查自己的 API 看看这是否可行？
我已经检查了 API。我无法找出方法。这就是我在这里发帖的原因。我在这里放了angular，因为这是大多数框架的通用图表API。我需要在这里获得更广泛社区的反馈。 @Jota.Toledo
请详细解释data sets 的含义以及您的图表应该如何表现。本文将为您提供帮助：stackoverflow.com/help/mcve
我的意思是这个部分：series: [{ data: [83], dataLabels: { format: '<p style="text-align:center;">{y}%</p>' } }]。你可以看到我们在这里只能使用一个数据集，即data: [83]。我需要在上面放置多个数据。喜欢这个[83,45,55]。你知道怎么做吗？ @KamilKulig

标签： javascript angular typescript highcharts ionic3

【解决方案1】：

data 数组可以包含多个值用于一个系列：

series: [{
    data: [80, 150, 200]
}]

现场演示：http://jsfiddle.net/kkulig/tou6wwxj/

如果您希望每个刻度盘仅在其自己的范围内移动，那么您只需确保在初始化或更新某个点时为其分配适当的值。

【讨论】：