Android/iOS应用中AnyChart柱状图无法显示负值的技术求助

核心问题分析 #

原Android代码中通过cartesian.yScale().minimum(0d);强制Y轴最小值为0，这会导致所有负值被截断显示为0，同时X轴会上移至Y=0的位置。移除该限制即可让图表正常渲染负值。

修正后的Android Java代码 #

package com.anychart.sample.charts;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

import com.anychart.AnyChart;
import com.anychart.AnyChartView;
import com.anychart.chart.common.dataentry.DataEntry;
import com.anychart.chart.common.dataentry.ValueDataEntry;
import com.anychart.charts.Cartesian;
import com.anychart.core.cartesian.series.Column;
import com.anychart.enums.Anchor;
import com.anychart.enums.HoverMode;
import com.anychart.enums.Position;
import com.anychart.enums.TooltipPositionMode;
import com.anychart.sample.R;

import java.util.ArrayList;
import java.util.List;

public class ColumnChartActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chart_common);

        AnyChartView anyChartView = findViewById(R.id.any_chart_view);
        anyChartView.setProgressBar(findViewById(R.id.progress_bar));

        Cartesian cartesian = AnyChart.column();

        List<DataEntry> data = new ArrayList<>();
        data.add(new ValueDataEntry("Column 1", 48));
        data.add(new ValueDataEntry("Column 2", -45));
        data.add(new ValueDataEntry("Column 3", 26));
        data.add(new ValueDataEntry("Column 4", 11));
        data.add(new ValueDataEntry("Column 5", 12));
        data.add(new ValueDataEntry("Column 6", 60));
        data.add(new ValueDataEntry("Column 7", -30));
        data.add(new ValueDataEntry("Column 8", 50));
        data.add(new ValueDataEntry("Column 9", 60));

        Column column = cartesian.column(data);

        column.tooltip()
                .titleFormat("{%X}")
                .position(Position.CENTER_BOTTOM)
                .anchor(Anchor.CENTER_BOTTOM)
                .offsetX(0d)
                .offsetY(5d)
                .format("${%Value}{groupsSeparator: }");

        cartesian.animation(true);
        cartesian.title("Top 10 Cosmetic Products by Revenue");

        // 移除Y轴最小值为0的限制，让图表自动计算包含负值的范围
        // 若需自定义最小值，可改为：cartesian.yScale().minimum(-50d);

        cartesian.yAxis(0).labels().format("${%Value}{groupsSeparator: }");

        cartesian.tooltip().positionMode(TooltipPositionMode.POINT);
        cartesian.interactivity().hoverMode(HoverMode.BY_X);

        cartesian.xAxis(0).title("Product");
        cartesian.yAxis(0).title("Revenue");

        anyChartView.setChart(cartesian);
    }
}

iOS Swift示例代码 #

import UIKit
import AnyChart

class ColumnChartViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let anyChartView = AnyChartView(frame: view.bounds)
        anyChartView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(anyChartView)
        
        NSLayoutConstraint.activate([
            anyChartView.topAnchor.constraint(equalTo: view.topAnchor),
            anyChartView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            anyChartView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            anyChartView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        let cartesian = AnyChart.column()
        
        let data = [
            ValueDataEntry(x: "Column 1", value: 48),
            ValueDataEntry(x: "Column 2", value: -45),
            ValueDataEntry(x: "Column 3", value: 26),
            ValueDataEntry(x: "Column 4", value: 11),
            ValueDataEntry(x: "Column 5", value: 12),
            ValueDataEntry(x: "Column 6", value: 60),
            ValueDataEntry(x: "Column 7", value: -30),
            ValueDataEntry(x: "Column 8", value: 50),
            ValueDataEntry(x: "Column 9", value: 60)
        ]
        
        let column = cartesian.column(data)
        
        column.tooltip()
            .titleFormat("{%X}")
            .position(.centerBottom)
            .anchor(.centerBottom)
            .offsetX(0)
            .offsetY(5)
            .format("${%Value}{groupsSeparator: }")
        
        cartesian.animation(true)
        cartesian.title("Top 10 Cosmetic Products by Revenue")
        
        // 移除Y轴最小值限制，或设置自定义负值范围
        // cartesian.yScale().minimum(-50)
        
        cartesian.yAxis(0).labels().format("${%Value}{groupsSeparator: }")
        
        cartesian.tooltip().positionMode(.point)
        cartesian.interactivity().hoverMode(.byX)
        
        cartesian.xAxis(0).title("Product")
        cartesian.yAxis(0).title("Revenue")
        
        anyChartView.setChart(cartesian)
    }
}

内容的提问来源于stack exchange，提问作者Mert Özoğul