内置线性仪表,带有高图(带指针)

时间:2017-12-10 18:45:51

标签: highcharts linear fusioncharts gauge bullet

我正在尝试在highcharts中重新创建一个fusiongraph的线性测量图表。 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图表必须接管以下属性:

  1. 负值
  2. 至少4组(颜色)
  3. 指针(指示标记),顶部有数字
  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;
    }
    

    但是遇到了一些问题:

    1. 负数不起作用
    2. 指针
    3. 最大值未显示(4.4之前停止)
    4. 希望有人可以帮我构建一个带有高图的漂亮的线性规范图表。

1 个答案:

答案 0 :(得分:2)

参考此post。我使用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演示