带高图的内置线性仪表（带指针）

Question

我正在尝试在 highcharts 中重新创建 fusionchart 的线性仪表图。 This 是我正在尝试重新创建的示例。

负责人：

<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>

正文：

FusionCharts.ready(function () {
var cpuGauge = new FusionCharts({
    type: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge',
    width: '400',
    height: '190',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "lowerLimit": "-1.9",
            "upperLimit": "4.4",
            "numberSuffix": "%",
            "chartBottomMargin": "40",  
            "valueFontSize": "11",
            "pointerBgColor": "#000000",
            "baseFontColor": "#000000",
            "decimalSeparator": ",",
            "forceDecimals": "1",
            "decimals": "1",

            "valueFontBold": "0"                 
        },
        "colorRange": {
            "color": [
                {
                    "minValue": "-1.9",
                    "maxValue": "-0.1",
                    "label": "",
                    "code": "#e51b1b",
                }, 
                {
                    "minValue": "-0.1",
                    "maxValue": "1.0",
                    "label": "",
                    "code": "#fa7921",
                }, 
                {
                    "minValue": "1.0",
                    "maxValue": "1.5",
                    "label": "",
                    "code": "#fde74c",
                }, 
                {
                    "minValue": "1.5",
                    "maxValue": "4.4",
                    "label": "",
                    "code": "#9bc53d",
                }
            ]
        },
        "pointers": {
            "pointer": [
                {
                    "value": "2"
                }
            ]
        },
    }
})
.render();

});

highcharts 图表必须接管以下属性：

负值
至少4组（颜色）
顶部有数字的指针（指示标记）

另外，如果有一个可以看到指针移动的动画，我将不胜感激。

highcharts 的子弹图最接近 fusionchart。我已经用这张图迈出了第一步 (example)

负责人：

 <script src="https://code.highcharts.com/highcharts.js"></script>
 <script src="https://code.highcharts.com/modules/bullet.js"></script>
 <div id="container1"></div>

正文：

    Highcharts.setOptions({
      chart: {
        inverted: true,
        marginLeft: 135,
        type: 'bullet'
      },
      title: {
        text: null
      },
      legend: {
        enabled: false
      },
      yAxis: {
        gridLineWidth: 0
      },
      plotOptions: {
        series: {
          pointPadding: 0.25,
          borderWidth: 0,
          color: '#000',
          targetOptions: {
            width: '200%'
          }
        }
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      }
    });

    Highcharts.chart('container1', {
      chart: {
        marginTop: 40
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: "P"
      },
      yAxis: {
        plotBands: [{
          from: -1.9,
          to: -0.1,
          color: '#e51b1b'
        }, {
          from: -0.1,
          to: 1,
          color: '#fa7921'
        }, {
          from: 1,
          to: 1.5,
          color: '#fde74c'
        }, {
          from: 1.5,
          to: 4.4,
          color: '#9bc53d'
        }],
        labels: {
          format: '{value}%'
        },
        title: null
      },
      series: [{
        data: [{
          y: 0,
          target: 2
        }]
      }],
      tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
      }
    });

CSS:

#container1 {
max-width: 800px;
height: 115px;
margin: 1em auto;
}

但是遇到了一些问题：

负数不起作用
指针
最大值未显示（在 4.4 之前停止）

Answer 1

参考此post. I have modified this chart with yAxis.tickPositioner和yAxis的最小值，最大值属性

$(function () {

/**
 * Highcharts Linear-Gauge series plugin
 */
(function (H) {
    var defaultPlotOptions = H.getOptions().plotOptions,
        columnType = H.seriesTypes.column,
        wrap = H.wrap,
        each = H.each;

    defaultPlotOptions.lineargauge = H.merge(defaultPlotOptions.column, {});
    H.seriesTypes.lineargauge = H.extendClass(columnType, {
        type: 'lineargauge',
        //inverted: true,
        setVisible: function () {
            columnType.prototype.setVisible.apply(this, arguments);
            if (this.markLine) {
                this.markLine[this.visible ? 'show' : 'hide']();
            }
        },
        drawPoints: function () {
            // Draw the Column like always
            columnType.prototype.drawPoints.apply(this, arguments);

            // Add a Marker
            var series = this,
                chart = this.chart,
                inverted = chart.inverted,
                xAxis = this.xAxis,
                yAxis = this.yAxis,
                point = this.points[0], // we know there is only 1 point
                markLine = this.markLine,
                ani = markLine ? 'animate' : 'attr';

            // Hide column
            point.graphic.hide();

            if (!markLine) {
                var path = inverted ? ['M', 0, 0, 'L', -5, -5, 'L', 5, -5, 'L', 0, 0, 'L', 0, 0 + xAxis.len] : ['M', 0, 0, 'L', -5, -5, 'L', -5, 5,'L', 0, 0, 'L', xAxis.len, 0];                
                markLine = this.markLine = chart.renderer.path(path)
                    .attr({
                    fill: series.color,
                    stroke: series.color,
                        'stroke-width': 1
                }).add();
            }
            markLine[ani]({
                translateX: inverted ? xAxis.left + yAxis.translate(point.y) : xAxis.left,
                translateY: inverted ? xAxis.top : yAxis.top + yAxis.len -  yAxis.translate(point.y)
            });
        }
    });
})(Highcharts);

    $('#container').highcharts({
        chart: {
            type: 'lineargauge',
            inverted: true
        },
        title: {
            text: 'A Horizontal Linear Gauge'
        },
        xAxis: {
            lineColor: '#C0C0C0',
            labels: {
                enabled: false
            },
            tickLength: 0,

        },
        yAxis: {
            min: -1.9,
            max: 4.4,
            tickPositions: [-1.9, -0.1,1,1.5 ,4.4],
            tickLength: 1,
            tickWidth: 1,
            tickColor: '#C0C0C0',
            gridLineColor: '#C0C0C0',
            gridLineWidth: 1,
            minorTickInterval: 5,
            minorTickWidth: 1,
            minorTickLength: 5,
            minorGridLineWidth: 0,
            startOnTick: true,
            endOnTick: true,

            title: null,
            labels: {
                format: '{value}%'
            },
            plotBands: [{
                from:-1.9,
                to: -0.1,
                color: 'rgba(229, 27, 27, 1)'
            }, {
                from: -0.1,
                to: 1.0,
                color: 'rgba(250, 121, 33, 1)'
            }, {
                from: 1.0,
                to: 1.5,
                color: 'rgba(253, 231, 76, 1)'
            },
            {
                from: 1.5,
                to: 4.4,
                color: 'rgba(155, 197, 61, 1)'
            }]
        },
        legend: {
            enabled: false
        },

        series: [{
            data: [1.1],
            color: '#000000',
            dataLabels: {
                enabled: true,
                align: 'center',
                format: '{point.y}%',
                y: 10,
            }
        }]

    }, // Add some life
    function (chart) {
        setInterval(function () {
            Highcharts.each(chart.series, function (serie) {
                var point = serie.points[0],
                    newVal,
                    inc = (Math.random() - 0.5) *10;

                newVal = point.y + inc;
                if (newVal < -1.9 || newVal > 4.4) {
                    newVal = point.y - inc;
                }

                point.update(Math.floor(newVal));
            });
        }, 2000);

    });
});

Fiddle 演示

带高图的内置线性仪表（带指针）

Built linear gauge with highcharts (with pointer)

bullet

fusioncharts

highcharts

gauge