首页 > 解决方案 > Apexchart js如何用java更改弧度条形图中的标签

问题描述

我正在为我的 Web 应用程序使用 vaadin 和 java。我试图显示汽车的平均油耗。这当然是以升为单位的。

在此处输入图像描述

从视觉上可以看出,底部显示了百分比。但是,我想在这里显示与实际 75.0 不同的值。例如,我希望弧度条有 75%,但在标签部分,我想写“7.5 升”而不是 75%。

 ApexCharts averageFuelConsumption =
    ApexChartsBuilder.get()
        .withChart(
            ChartBuilder.get()
                .withType(Type.radialBar)
                .withToolbar(ToolbarBuilder.get().withShow(true).build())
                .build())
        .withPlotOptions(
            PlotOptionsBuilder.get()
                .withRadialBar(
                    RadialBarBuilder.get()
                        .withStartAngle(-135.0)
                        .withEndAngle(225.0)
                        .withHollow(
                            HollowBuilder.get()
                                .withMargin(0.0)
                                .withSize("70%")
                                .withBackground("#fff")
                                .withPosition(HollowPosition.front)
                                .withDropShadow(
                                    DropShadowBuilder.get()
                                        .withEnabled(false)
                                        .withTop(3.0)
                                        .withBlur(4.0)
                                        .withOpacity(0.24)
                                        .build())
                                .build())
                        .withDataLabels(
                            RadialBarDataLabelsBuilder.get()
                                .withShow(true)
                                .withName(
                                    NameBuilder.get()
                                        .withOffsetY(-10.0)
                                        .withShow(true)
                                        .withColor("#002366")
                                        .withFontSize("12px")
                                        .build())
                                .withValue(
                                    ValueBuilder.get()
                                        .withColor("#111")
                                        .withFontSize("36px")
                                        .withShow(true)
                                        .build())
                                .build())
                        .build())
                .build())
        .withFill(
            FillBuilder.get()
                .withType("gradient")
                .withGradient(
                    GradientBuilder.get()
                        .withShade("dark")
                        .withType("horizontal")
                        .withShadeIntensity(0.5)
                        .withGradientToColors("#ABE5A1")
                        .withInverseColors(true)
                        .withOpacityFrom(1.0)
                        .withOpacityTo(1.0)
                        .withStops(0.0, 100.0)
                        .build())
                .build())
        .withSeries(75.0)
        .withStroke(StrokeBuilder.get().withLineCap(LineCap.round).build())
        .withLabels("Ortalama Yakit Tüketimi")
        .build();

标签: vaadinapexcharts

解决方案


推荐阅读