在Highcharts

Question

我正在尝试创建一个solidguage高图，但我无法根据视觉对齐数据标签。我的图表代码是：

        function dcadjustmentschart() {   
    $('#adjustments-chart1').highcharts({
            chart: {
                type: 'solidgauge',
                marginTop: 0,
              }
            },
            title: {
                text: null,
            },
            credits : {
                enabled : false
            },
            exporting: {
                enabled: false
            },
            tooltip: {
                borderWidth: 0,
                enabled: true,
                backgroundColor: 'none',
                shadow: false,
                style: {
                    fontSize: '16px'
                },
                positioner: function (labelWidth, labelHeight) {
                    return {
                        x: 200 - labelWidth / 2,
                        y: 180
                    };
                }
            },
            pane: {
                startAngle: 0,
                endAngle: 360,
                background: [{ // Track for Move
                    outerRadius: '100%',
                    innerRadius: '100%',
                    borderWidth: 2
                }]
            },

            yAxis: {
                min: 0,
                max: 100,
                lineWidth: 0,
                tickPositions: []
            },

            plotOptions: {
                solidgauge: {
                    borderWidth: '5px',

                },
                dataLabels: {
                    borderWidth: "0",
                    marginTop: "0"
                }
            },

            series: [{
                enableMouseTracking: false,
                name: 'Forward <br/> By <br/> 45',
                borderColor: Highcharts.getOptions().colors[0],
                data: [{
                    color: Highcharts.getOptions().colors[0],
                    radius: '100%',
                    innerRadius: '100%',
                    y: 45,
                }],
                dataLabels: {                
                    formatter: function () {
                        return this.series.name
                    },
                    y: 25,
                    x: -50,
                    styles: {
                        fontSize: "12px",
                        borderWidth: "0",
                        fontWeight: "bold",
                        width: "50px",
                        marginleft: "50px"

                    }
                }
            }]
        });


    };

以上是输出。

这就是我需要的：

• 我想调整文字＆＃34;前进45＆＃34;在圆圈的中心
• 我正在使用<br/>将文本分解为第二行，如何摆脱它？
• 我想更改圆圈的背景颜色

Answer 1

我认为您的代码中存在小错误。您应该使用dataLabels.style而不是dataLabels.styles。在这里，您可以在Highcharts API中查看有关此参数的信息：

http://api.highcharts.com/highcharts#plotOptions.solidgauge.dataLabels.style

您可以使用'text-anchor'属性width dataLabels.align和dataLabels.verticalAlign将文本放置在窗格的中心位置：

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor http://api.highcharts.com/highcharts#plotOptions.solidgauge.dataLabels.align http://api.highcharts.com/highcharts#plotOptions.solidgauge.dataLabels.verticalAlign

您可以在背景数组中添加backgroundColor： http://api.highcharts.com/highcharts#pane.background

   function dcadjustmentschart() {
     $('#container').highcharts({
       chart: {
         type: 'solidgauge',
         marginTop: 0,
       },
       title: {
         text: null,
       },
       credits: {
         enabled: false
       },
       exporting: {
         enabled: false
       },
       pane: {
         startAngle: 0,
         endAngle: 360,
         background: [{
           backgroundColor: '#bada55',
           borderWidth: 0,
           outerRadius: '100%'
         }, {
           outerRadius: '100%',
           innerRadius: '100%',
           borderWidth: 2,
           borderColor: 'black'
         }],
       },

       yAxis: {
         min: 0,
         max: 100,
         lineWidth: 0,
         tickPositions: []
       },

       plotOptions: {
         solidgauge: {
           borderWidth: '5px',
           dataLabels: {
             padding: 0,
             x: 25,
             align: 'center',
             verticalAlign: 'middle',

           }
         },
       },

       series: [{
         enableMouseTracking: false,
         name: 'Forward By 45',
         borderColor: Highcharts.getOptions().colors[0],
         data: [{
           color: Highcharts.getOptions().colors[0],
           radius: '100%',
           innerRadius: '100%',
           y: 45,
         }],
         dataLabels: {
           overflow: "none",
           crop: false,
           borderWidth: 0,
           formatter: function() {
             return this.series.name
           },
           y: 0,
           style: {
             fontSize: "12px",
             fontWeight: "bold",
             width: "50px",
             textAnchor: 'middle',
           }
         }
       }]
     });
   };
   dcadjustmentschart()

在这里你可以看到一个如何工作的例子： http://jsfiddle.net/cune5qs5/25/

亲切的问候。