Question

我正在研究highcharts以及如此依赖它，所以我不能使用其他插件

$(function () {

    var gaugeOptions = {

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

        'title': null,

        'tooltip': {
            'enabled': false
        },

        'pane': {
            'center': ['50%', '50%'],
            'size': '100px',
            'startAngle': 0,
            'endAngle': 360,
            'background': {
                'backgroundColor': '#EEE',
                'innerRadius': '90%',
                'outerRadius': '100%',
                'borderWidth': 0
            }
        },

        'yAxis': {
            'min': 0,
            'max': 100,
            'labels': {
                'enabled': false
            },

            'lineWidth': 0,
            'minorTickInterval': null,
            'tickPixelInterval': 400,
            'tickWidth': 0
        },

        'plotOptions': {
            'solidgauge': {
                'innerRadius': '90%'
            }
        },

        'series': [{
            'name': 'Speed',
            'data': [50],
            'dataLabels': {
                'enabled': true,
                useHTML: true,
                format: '<div ><span style="font-size:15px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
                   '<span style="font-size:08px;color:Black">%</span> <br/><br/></div>',
                borderWidth: 0

            }

        }]
    };
    debugger;

    $('#Chart2').highcharts(gaugeOptions);

});



$(function () {

    var gaugeOptions = {

        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '50%'],
            size: '40%',
            startAngle: 0,
            endAngle: 360,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                enabled: false
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: -20,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };

    // The speed gauge
    $('#sampleChart').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 200,
            title: {

            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Speed',
            data: [80],
            dataLabels: {
                format: '<div ><span style="font-size:15px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
                   '<span style="font-size:12px;color:Black">%</span></div>',
            },
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    }));



});

http://jsfiddle.net/mmhukqtz/

这是我正在使用的图表我想在这样的圆圈上方给出刻度线

也喜欢这个

感谢您寻求帮助

Answer 1

您需要定义一个单独的窗格和轴，并将轴偏移属性设置为正值 - 对于窗格外的刻度 - 或者设置为负值 - 用于窗格内的刻度。

Pane config：

pane: [{
  size: '40%',
  center: ['50%', '50%'],
  background: {
    innerRadius: '60%',
    outerRadius: '100%'
  }
}, {
  size: '40%',
  background: null
}]

Axis config：

    yAxis: [{
  min: 0,
  max: 200,
  tickWidth: 0,
  minorTickInterval: null,
  labels: {
    enabled: false
  },
  stops: [
    [0.1, '#55BF3B'], // green
    [0.5, '#DDDF0D'], // yellow
    [0.9, '#DF5353'] // red
  ]
}, {
  linkedTo: 0,
  pane: 1,
  offset: 20, // offset property controls the distance from the pane
  tickInterval: 10,
  minorTickInterval: null,
  lineWidth: 0,
  labels: {
    enabled: false
  }
}],

蜱虫在外面：http://jsfiddle.net/key8v7mn/ 蜱虫在里面：http://jsfiddle.net/key8v7mn/1/

Answer 2

在yAxis中试用此代码：

  tickLength: 5,
  tickWidth: 4,
  tickColor: 'black',
  tickPosition: 'outside',
  minorTickLength: 0,
  tickInterval: 1,

tickInterval完成这项工作。

更新了小提琴： http://jsfiddle.net/jb242m6o/

tickPosition: "inside"意味着你会得到内部的蜱虫 tickPosition: "outside"表示你会在外面打勾

如何在Highcharts中围绕Solid Gauge制作Tick线

2 个答案: