自定义折线图的Y轴刻度和点击反馈问题

[zwp4210933]

大佬你好，我又来了，下面是我的UI稿子

然后是我目前实现的程度

现在我遇到了四个问题：
1、Y轴的刻度需要在网格线之上
2、点击某个点不需要出现透明圆球
3、点击某个点我希望能知道这个点在视图中的position，我来绘制十字准线和浮窗
4、希望折线能以渐变的形式绘制，渐变的颜色与数据的大小关联

万分感谢

[zwp4210933]

补充一下，我已经解决了问题1和问题2，这是我对应的Json

Highcharts.chart('container', {
  "credits": {
    "enabled": false
  },
  "legend": {
    "enabled": true
  },
  "yAxis": {
    "opposite": true,
    "gridLineWidth": 1,
    "visible": true,
    "min": 1700,
    "tickWidth": 1,
    "title": {
      "text": ""
    },
    "lineColor": "#999999",
    "max": 2200,
    "top": "5%",
    "tickLength": 40,
    "lineWidth": 0,
    "height": "95%",
    "tickColor": "#999999",
    "gridLineColor": "#999999",
    "labels": {
      "style": {
        "color": "#999999",
        "fontSize": "12px"
      },
      "y": -4,
      "enabled": true
    }
  },
  "xAxis": {
    "title": {
      "text": ""
    },
    "visible": true,
    "categories": [
      "16:37", "17:12", "17:46", "18:16", "18:44", "19:15", "19:36", "20:17",
      "20:32", "21:15", "21:55", "22:21", "22:42", "22:57", "23:30", "00:24",
      "00:52", "00:59", "01:49", "01:58", "02:41", "03:20", "03:44", "03:58"
    ],
    "lineColor": "#999999",
    "labels": {
      "autoRotation": [0],
      "enabled": true,
      "step": 4,
      "style": {
        "fontSize": "12px",
        "color": "#999999"
      }
    }
  },
  "plotOptions": {
    "series": {
      "stacking": "normal",
      "animation": {
        "duration": 800,
        "easing": 0
      },
      "marker": {
        "radius": 0,
        "enabled": true,
        "symbol": "circle"
      },
      "point": {
        "events": {
          "click": "(function(){let c=this.series.chart,m=[];c.series.forEach(s=>{let d=s.data[this.index];if(d&&d.graphic&&d.graphic.element){let r=d.graphic.element.getBoundingClientRect();m.push({name:s.name,y:d.y,x:d.x,category:d.category,index:this.index,DOMRect:JSON.stringify(r)})}});window.webkit.messageHandlers.click.postMessage(m)})"
        }
      },
      "dataLabels": {},
      "states": {
        "hover": {
          "enabled": false,
          "brightness": 0
        },
        "select": {
          "halo": {
            "opacity": 0
          }
        },
        "inactive": {
          "enabled": false
        }
      }
    }
  },
  "title": {
    "text": ""
  },
  "colors": [
    "#1e90ff", "#ef476f", "#ffd066", "#04d69f", "#25547c"
  ],
  "tooltip": {
    "enabled": false,
    "shared": true
  },
  "chart": {
    "type": "area",
    "zooming": {
      "type": "none"
    },
    "backgroundColor": "#252228"
  },
  "series": [{
    "fillColor": {
      "linearGradient": {
        "x1": 0, "y1": 0, "x2": 0, "y2": 1
      },
      "stops": [
        [0, "rgba(255,255,255,0.4)"],
        [0.22727273404598236, "rgba(255,255,255,0.0)"]
      ]
    },
    "color": "#FFFFFF",
    "data": [
      2041.63037109375, 1819.68896484375, 2091.53857421875, 1819.5023193359375,
      1887.154052734375, 1939.7703857421875, 2099.42529296875, 1799.9013671875,
      2008.78125, 1804.402587890625, 2119.7265625, 1873.320556640625,
      1895.861083984375, 2180.43603515625, 1881.2861328125, 2186.647216796875,
      1835.49072265625, 2030.1007080078125, 1714.725341796875, 1932.9627685546875,
      1775.2398681640625, 1896.927490234375, 1969.164794921875, 1967.6162109375
    ],
    "lineWidth": 1,
    "showInLegend": false
  }],
  "defaultOptions": {}
});

[AAChartModel]

配置 JS:

// 创建并配置图表
    // Helper function to create Date UTC timestamps for data
            function getDateUTC(hour, minute) {
                const now = new Date();
                return Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), hour, minute, 0);
            }
            
            Highcharts.chart('container', {
                chart: {
                    type: 'area',
                    backgroundColor: '#333333', // Dark background for the chart area
                },
                title: {
                    text: 'Speed(km/h)',
                    align: 'left',
                    style: {
                        color: '#E0E0E3', // Light text color
                        fontSize: '16px'
                    }
                },
                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                xAxis: {
                    type: 'datetime',
                    tickInterval: 2 * 3600 * 1000, // Every 2 hours
                    labels: {
                        format: '{value:%H:%M}',
                        style: {
                            color: '#E0E0E3'
                        }
                    },
                    lineColor: '#707073', // Axis line color
                    tickColor: '#707073',
                    gridLineWidth: 0, // Hide vertical grid lines
                },
                yAxis: {
                    opposite: true, // 将y轴移至右侧[1,9](@ref)
                    labels: {
                        align: 'left', // 标签左对齐(相对于轴线)
                        x: -20, // 向左微调位置
                        y: -10, // 向上偏移10px[4](@ref)
                        style: {
                            color: '#E0E0E3',
                            fontSize:15,
                            textOverflow: 'none' // 防止文字被截断
                        }
                    },
                    min: 0,
                    max: 50,
                    tickInterval: 10,
                    title: {
                        text: null // No Y-axis title
                    },
                    
                    gridLineColor: '#505053', // Lighter gray grid lines
                    gridLineDashStyle: 'solid',
                    plotLines: [{
                        value: 23.5, // Approximate value for the dashed line
                        color: '#707073',
                        dashStyle: 'Dash',
                        width: 1.5,
                        zIndex: 3 // Above grid lines
                        // Optional label for this line, but the annotation is separate
                        // label: {
                        //    text: 'Avg?',
                        //    align: 'right',
                        //    style: { color: '#A0A0A3' }
                        // }
                    }]
                },
                tooltip: {
                    // Enabled by default, customize if needed
                    backgroundColor: 'rgba(50, 50, 50, 0.85)',
                    style: {
                        color: '#F0F0F0'
                    },
                    formatter: function () {
                        return `<b>${Highcharts.dateFormat('%H:%M', this.x)}</b><br/>Speed: ${this.y} km/h`;
                    }
                },
                plotOptions: {
                    area: {
                        lineWidth: 2,
                        color: { // Gradient fill
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                    [0, 'red'], // Start color (orange/yellow) with opacity
                                    [1, 'rgba(51, 51, 51, 0)']    // End color (transparent towards background)
                                    ]
                        },
                        marker: {
                            enabled: false, // No markers by default
                            states: {
                                hover: {
                                    enabled: false,
                                    radius: 4
                                }
                            }
                        },
                        fillColor: { // Gradient fill
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                    [0, 'rgba(255, 191, 0, 0.6)'], // Start color (orange/yellow) with opacity
                                    [1, 'rgba(51, 51, 51, 0)']    // End color (transparent towards background)
                                    ]
                        },
                        
                        threshold: null // Needed for area chart fill to start from bottom
                    }
                },
                series: [{
                    name: 'Speed',
                    // Estimated data points [timestamp, speed]
                    data: [
                           [getDateUTC(12, 0), 5],
                           [getDateUTC(12, 30), 21],
                           [getDateUTC(13, 0), 8],
                           [getDateUTC(13, 30), 33],
                           [getDateUTC(14, 0), 9],
                           [getDateUTC(14, 30), 18],
                           [getDateUTC(15, 0), 7],
                           [getDateUTC(15, 30), 28],
                           [getDateUTC(16, 0), 8],
                           [getDateUTC(16, 30), 15],
                           [getDateUTC(16, 45), 8],
                           [getDateUTC(17, 15), 48], // Highest peak
                           [getDateUTC(17, 40), 8],
                           [getDateUTC(17, 50), 18],
                           [getDateUTC(18, 0), 7],
                           [getDateUTC(18, 50), null],
                           ]
                }],
            });

将这段代码粘贴至在线编辑器中, 运行查看是否是你需要的效果.

在线编辑器:

• https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/area-chart/

[AAChartModel]

对应的 AAChartKit 中的 OC 代码:

// Helper function to create Date UTC timestamps for data
NSDate *getDateUTC(NSInteger hour, NSInteger minute) {
    NSDate *now = [NSDate date];
    NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
    [calendar setTimeZone:[NSTimeZone timeZoneWithAbbreviation:@"UTC"]];
    NSDateComponents *components = [calendar components:(NSCalendarUnitYear | NSCalendarUnitMonth | NSCalendarUnitDay) fromDate:now];
    [components setHour:hour];
    [components setMinute:minute];
    [components setSecond:0];
    return [calendar dateFromComponents:components];
}

+ (AAOptions *)configureChartOptions {
    AAOptions *aaOptions = AAOptions.new
        .chartSet(AAChart.new
            .typeSet(AAChartTypeArea) // Chart type: area
            .backgroundColorSet(@"#333333") // Dark background for the chart area
        )
        .titleSet(AATitle.new
            .textSet(@"Speed(km\/h)") // Title with HTML
            .alignSet(AAChartAlignTypeLeft) // Align title to the left
            .styleSet(AAStyle.new
                .colorSet(@"#E0E0E3") // Light text color
                .fontSizeSet(@"16px")
            )
        )
        .creditsSet(AACredits.new
            .enabledSet(false) // Disable credits
        )
        .legendSet(AALegend.new
            .enabledSet(false) // Disable legend
        )
        .xAxisSet(AAXAxis.new
            .typeSet(@"datetime") // X-axis type: datetime
            .tickIntervalSet(@(2 * 3600 * 1000)) // Every 2 hours
            .labelsSet(AALabels.new
                .formatSet(@"{value:%H:%M}") // Time format HH:MM
                .styleSet(AAStyle.new
                    .colorSet(@"#E0E0E3")
                )
            )
            .lineColorSet(@"#707073") // Axis line color
            .tickColorSet(@"#707073")
            .gridLineWidthSet(@0) // Hide vertical grid lines
        )
        .yAxisSet(AAYAxis.new
            .oppositeSet(true) // Move y-axis to the right
            .labelsSet(AALabels.new
                .alignSet(@"left") // Labels aligned left (relative to axis)
                .xSet(@-20) // Adjust position slightly left
                .ySet(@-10) // Offset upward by 10px
                .styleSet(AAStyle.new
                    .colorSet(@"#E0E0E3")
                    .fontSizeSet(@"15")
                    .textOverflowSet(@"none") // Prevent text truncation
                )
            )
            .minSet(@0)
            .maxSet(@50)
            .tickIntervalSet(@10)
            .titleSet(AAAxisTitle.new
                .textSet(nil) // No Y-axis title
            )
            .gridLineColorSet(@"#505053") // Lighter gray grid lines
            .gridLineDashStyleSet(AAChartLineDashStyleTypeSolid)
            .plotLinesSet(@[
                AAPlotLinesElement.new
                    .valueSet(@23.5) // Approximate value for the dashed line
                    .colorSet(@"#707073")
                    .dashStyleSet(@"Dash")
                    .widthSet(@1.5)
                    .zIndexSet(@3) // Above grid lines
            ])
        )
        .tooltipSet(AATooltip.new
            .backgroundColorSet(@"rgba(50, 50, 50, 0.85)")
            .styleSet(AAStyle.new
                .colorSet(@"#F0F0F0")
            )
            .formatterSet(@AAJSFunc(function () {
                return `<b>${Highcharts.dateFormat('%H:%M', this.x)}</b><br/>Speed: ${this.y} km/h`;
            })) // Custom formatter as a JS string
        )
      
        .seriesSet(@[
            AASeriesElement.new
                .nameSet(@"Speed")
                .dataSet(@[
                    @[[NSNumber numberWithDouble:[getDateUTC(12, 0) timeIntervalSince1970] * 1000], @5],
                    @[[NSNumber numberWithDouble:[getDateUTC(12, 30) timeIntervalSince1970] * 1000], @21],
                    @[[NSNumber numberWithDouble:[getDateUTC(13, 0) timeIntervalSince1970] * 1000], @8],
                    @[[NSNumber numberWithDouble:[getDateUTC(13, 30) timeIntervalSince1970] * 1000], @33],
                    @[[NSNumber numberWithDouble:[getDateUTC(14, 0) timeIntervalSince1970] * 1000], @9],
                    @[[NSNumber numberWithDouble:[getDateUTC(14, 30) timeIntervalSince1970] * 1000], @18],
                    @[[NSNumber numberWithDouble:[getDateUTC(15, 0) timeIntervalSince1970] * 1000], @7],
                    @[[NSNumber numberWithDouble:[getDateUTC(15, 30) timeIntervalSince1970] * 1000], @28],
                    @[[NSNumber numberWithDouble:[getDateUTC(16, 0) timeIntervalSince1970] * 1000], @8],
                    @[[NSNumber numberWithDouble:[getDateUTC(16, 30) timeIntervalSince1970] * 1000], @15],
                    @[[NSNumber numberWithDouble:[getDateUTC(16, 45) timeIntervalSince1970] * 1000], @8],
                    @[[NSNumber numberWithDouble:[getDateUTC(17, 15) timeIntervalSince1970] * 1000], @48], // Highest peak
                    @[[NSNumber numberWithDouble:[getDateUTC(17, 40) timeIntervalSince1970] * 1000], @8],
                    @[[NSNumber numberWithDouble:[getDateUTC(17, 50) timeIntervalSince1970] * 1000], @18],
                    @[[NSNumber numberWithDouble:[getDateUTC(18, 0) timeIntervalSince1970] * 1000], @7],
                    @[[NSNumber numberWithDouble:[getDateUTC(18, 50) timeIntervalSince1970] * 1000], [NSNull null]], // Null value
                ])
                .lineWidthSet(@2)
                .colorSet((id)AAGradientColor.new
                    .linearGradientSet(AALinearGradient.new
                        .x1Set(@0)
                        .y1Set(@0)
                        .x2Set(@0)
                        .y2Set(@1))
                    .stopsSet(@[
                        @[@0, @"red"], // Start color (orange/yellow) with opacity
                        @[@1, @"rgba(51, 51, 51, 0)"] // End color (transparent towards background)
                    ])
                )
                .markerSet(AAMarker.new
                    .enabledSet(false) // No markers by default
                    .statesSet(AAMarkerStates.new
                        .hoverSet(AAMarkerHover.new
                            .enabledSet(false)
                            .radiusSet(@4)
                        )
                    )
                )
                .fillColorSet((id)AAGradientColor.new
                    .linearGradientSet(AALinearGradient.new
                        .x1Set(@0)
                        .y1Set(@0)
                        .x2Set(@0)
                        .y2Set(@1))
                    .stopsSet(@[
                        @[@0, @"rgba(255, 191, 0, 0.6)"], // Start color (orange/yellow) with opacity
                        @[@1, @"rgba(51, 51, 51, 0)"] // End color (transparent towards background)
                    ])
                )
                .thresholdSet(nil) // Needed for area chart fill to start from bottom
        ]);

    return aaOptions;
}

[AAChartModel]

3、点击某个点我希望能知道这个点在视图中的position，我来绘制十字准线和浮窗

这个问题, 还是参考我在之前的问题

• 选中时改变标签颜色，自定义选中样式 AAChartKit-Swift#516

中提到的方法.

[zwp4210933]

感谢大佬，完美实现了