javascript - 如何在 Highcharts 中围绕 Solid Gauge 制作刻度线

标签 javascript jquery html css highcharts

我正在研究 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/

这是我正在使用的图表,我想像这样在圆的上侧打勾 Sample image of chart

还有这样的

enter image description here

感谢帮助

最佳答案

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

面板配置:

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

轴配置:

    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/

关于javascript - 如何在 Highcharts 中围绕 Solid Gauge 制作刻度线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44153363/

相关文章:

html - 围绕 100% 主体高度和宽度的边框(HTML 4.01 严格)

javascript - css 上的子菜单悬停菜单问题

javascript - NodeJS - 如何强制函数仅在集群中的特定工作 ID 上运行?

c# - 这段代码中的 IEventRepository 是什么? Resolver.resolve( ) 是做什么的?

javascript - 无法将 search() 与可变模式一起使用

javascript - 单击元素获取子隐藏输入字段的值

javascript - 如何在不变形的情况下将 Canvas 传递给pdf

javascript - 在 Fabric.js 中,如何修改对象类以便所有子类都具有新的自定义属性?

jQuery Draggable 和 Resizable 冲突

html - 从 CSS3 多列元素中删除额外的填充,如何?