支持自定义 Gauge Chart 仪表图指针颜色

[AAChartModel]

[AAChartModel]

如下配置 AAOptions:

/**
 Highcharts.chart('container', {

     chart: {
         type: 'gauge',
         plotBackgroundColor: null,
         plotBackgroundImage: null,
         plotBorderWidth: 0,
         plotShadow: false,
         height: '80%'
     },

     title: {
         text: 'Speedometer'
     },

     pane: {
         startAngle: -90,
         endAngle: 89.9,
         background: null,
         center: ['50%', '75%'],
         size: '110%'
     },

     // the value axis
     yAxis: {
         min: 0,
         max: 200,
         tickPixelInterval: 72,
         tickPosition: 'inside',
         tickColor: Highcharts.defaultOptions.chart.backgroundColor || '#FFFFFF',
         tickLength: 20,
         tickWidth: 2,
         minorTickInterval: null,
         labels: {
             distance: 20,
             style: {
                 fontSize: '14px'
             }
         },
         lineWidth: 0,
         plotBands: [{
             from: 0,
             to: 130,
             color: '#55BF3B', // green
             thickness: 20,
             borderRadius: '50%'
         }, {
             from: 150,
             to: 200,
             color: '#DF5353', // red
             thickness: 20,
             borderRadius: '50%'
         }, {
             from: 120,
             to: 160,
             color: '#DDDF0D', // yellow
             thickness: 20
         }]
     },

     series: [{
         name: 'Speed',
         data: [80],
         tooltip: {
             valueSuffix: ' km/h'
         },
         dataLabels: {
             format: '{y} km/h',
             borderWidth: 0,
             color: (
                 Highcharts.defaultOptions.title &&
                 Highcharts.defaultOptions.title.style &&
                 Highcharts.defaultOptions.title.style.color
             ) || '#333333',
             style: {
                 fontSize: '16px'
             }
         },
         dial: {
             radius: '80%',
             backgroundColor: 'gray',
             baseWidth: 12,
             baseLength: '0%',
             rearLength: '0%'
         },
         pivot: {
             backgroundColor: 'gray',
             radius: 6
         }

     }]

 });

 // Add some life
 setInterval(() => {
     const chart = Highcharts.charts[0];
     if (chart && !chart.renderer.forExport) {
         const point = chart.series[0].points[0],
             inc = Math.round((Math.random() - 0.5) * 20);

         let newVal = point.y + inc;
         if (newVal < 0 || newVal > 200) {
             newVal = point.y - inc;
         }

         point.update(newVal);
     }

 }, 3000);
 */
+ (AAOptions *)speedometerChart {
    AAChart *chart = AAChart.new
        .typeSet(AAChartTypeGauge)
    //        .plotBackgroundColorSet(@"null")
            .plotBackgroundImageSet((id)NSNull.null)
//            .plotBorderWidthSet(@0)
    //        .plotShadowSet(NO)
//            .heightSet(@"80%")
    ;
    
    AATitle *title = AATitle.new
        .textSet(@"Speedometer");
    
    AAPane *pane = AAPane.new
        .startAngleSet(@(-90))
        .endAngleSet(@89.9)
        .backgroundSet((id)NSNull.null)
        .centerSet(@[@"50%", @"75%"])
        .sizeSet((id)@"110%");
    
    AAYAxis *yAxis = AAYAxis.new
        .minSet(@0)
        .maxSet(@200)
    //        .tickPixelIntervalSet(@72)
        .tickPositionSet(@"inside")
        .tickColorSet(@"#FFFFFF")
        .tickLengthSet(@20)
        .tickWidthSet(@2)
        .minorTickIntervalSet((id)NSNull.null)
        .labelsSet(AALabels.new
                   .distanceSet(@20)
                   .styleSet(AAStyle.new
                             .fontSizeSet(@"14px")
                             )
                   )
        .lineWidthSet(@0)
        .plotBandsSet(@[
            AAPlotBandsElement.new
                .fromSet(@0)
                .toSet(@130)
                .colorSet(@"#55BF3B")
                .thicknessSet(@20)
                .borderRadiusSet((id)@"50%")
            ,
            AAPlotBandsElement.new
                .fromSet(@150)
                .toSet(@200)
                .colorSet(@"#DF5353")
                .thicknessSet(@20)
                .borderRadiusSet((id)@"50%")
            ,
            AAPlotBandsElement.new
                .fromSet(@120)
                .toSet(@160)
                .colorSet(@"#DDDF0D")
                .thicknessSet(@20)
        ]);
    
    AAPlotOptions *aaPlotOptions = AAPlotOptions.new
        .gaugeSet(AAGauge.new
                  .dialSet(AADial.new
                           .radiusSet(@"80%")
                           .backgroundColorSet(AAColor.grayColor)
                           .baseWidthSet(@12)
                           .baseLengthSet(@"0%")
                           .rearLengthSet(@"0%"))
                  .pivotSet(AAPivot.new
                            .backgroundColorSet(AAColor.grayColor)
                            .radiusSet(@6))
                  );
    
    
    AASeriesElement *series = AASeriesElement.new
        .nameSet(@"Speed")
        .dataSet(@[@80])
        .tooltipSet(AATooltip.new
                    .valueSuffixSet(@" km/h"))
        .dataLabelsSet(AADataLabels.new
                       .formatSet(@"{y} km/h")
                       .borderWidthSet(@0)
                       .colorSet((id)@"#333333")
                       .styleSet(AAStyle.new
                                 .fontSizeSet(@"16px")
                                 ))
    //        .dialSet(AADial.new
    //                    .radiusSet(@"80%")
    //                    .backgroundColorSet(@"gray")
    //                    .baseWidthSet(@12)
    //                    .baseLengthSet(@"0%")
    //                    .rearLengthSet(@"0%"))
    //        .pivotSet(AAPivot.new
    //                    .backgroundColorSet(@"gray")
    //                    .radiusSet(@6))
    ;
    
    AAOptions *aaOptions = AAOptions.new
        .chartSet(chart)
        .titleSet(title)
        .paneSet(pane)
        .yAxisSet(yAxis)
        .plotOptionsSet(aaPlotOptions)
        .seriesSet(@[series]);
    
    aaOptions
        .afterDrawChartJavaScriptSet(@AAJSFunc(
                                               // Add some life
                                               setInterval(() => {
                                                   const chart = Highcharts.charts[0];
                                                   if (chart && !chart.renderer.forExport) {
                                                       const point = chart.series[0].points[0],
                                                       inc = Math.round((Math.random() - 0.5) * 60);
                                                       
                                                       let newVal = point.y + inc;
                                                       if (newVal < 0 || newVal > 200) {
                                                           newVal = point.y - inc;
                                                       }
                                                       
                                                       point.update(newVal);
                                                   }
                                                   
                                               }, 500);
                                               ));
    
    return aaOptions;
}

[AAChartModel]

参考对应的在线示例:

• https://www.highcharts.com/demo/highcharts/gauge-speedometer

[AAChartModel]

其中的关键内容是这段代码:

+ (AAOptions *)speedometerChart {
...
...
...
    AAPlotOptions *aaPlotOptions = AAPlotOptions.new  // 创建图表配置对象
        .gaugeSet(AAGauge.new                         // 配置仪表盘类型
            .dialSet(AADial.new                       // 设置指针样式
                .radiusSet(@"80%")                    // 指针长度（容器宽度的80%）
                .backgroundColorSet(AAColor.grayColor)// 指针颜色（灰色）
                .baseWidthSet(@12)                    // 指针基部宽度（12像素）
                .baseLengthSet(@"0%")                 // 指针基部长度（0%不显示）
                .rearLengthSet(@"0%"))                // 指针尾部长度（0%不显示）
            .pivotSet(AAPivot.new                     // 设置中心轴点样式
                .backgroundColorSet(AAColor.grayColor)// 轴点颜色（灰色）
                .radiusSet(@6))                       // 轴点半径（6像素）
        );
...
...
...
}