使用 amchart5 的箱线图，箱线图元素的自定义颜色

Question

我正在尝试将下面的箱线图从 amcharts3 迁移到 amcharts5，并且需要帮助。

有一个演示看起来很接近我需要的：text。这里的问题是我找不到改变棍子颜色以及中位数下方和上方的框的方法。

amcharts 3 的实现方式是通过调整 Y 轴值来堆叠图表：（第一个图表代表底部的绿色棒，第二个图表代表黄色框，依此类推）

defaultBoxPlotOptions.graphs = [
        {
            "name": "Lower Limit",
            "type": "candlestick",
            "fill": ConfigService.chartColorsCandlestick('lower'),
            'colorKey': 'lower',
            "fillAlphas": 0,
            "openField": "bottomOpen",
            "highField": "lowOpen",
            "lowField": "bottomOpen",
            "closeField": "bottomOpen",
            lineThickness: 2
        },
        {
            "name": "Middle",
            "type": "candlestick",
            "fill": ConfigService.chartColorsCandlestick('open'),
            "fillColors": ConfigService.chartColorsCandlestick('open'),
            'colorKey': 'open',
            "fillAlphas": 1,
            "openField": "bottomOpen",
            "highField": "middle",
            "lowField": "bottomOpen",
            "closeField": "middle"
        },
.....
]

我知道 amcharts v5 中的图表相当于系列，我在下面的 vue3 组件中尝试了实现。如果我包含

 stacked: true,

那么我会得到下面的结果，否则我会将线索作为默认值（一个挨着另一个）

 <template>
    <div
        id="chartdiv"
        style="width: 100%; height: 500px"
    ></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as am5 from '@amcharts/amcharts5';
import * as am5xy from '@amcharts/amcharts5/xy';
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';

onMounted(() => {
    // Sample data
    let data = [
        { date: '2019-08-01', open: 32.3, high: 36.96, low: 31.15, close: 36.49, median: 0 },
        { date: '2019-08-02', open: 35.26, high: 35.95, low: 31.5, close: 31.85, median: 0 },
        { date: '2019-08-03', open: 29.9, high: 33.27, low: 28.3, close: 32.25, median: 0 },
    ];
    // Create root element
    let root = am5.Root.new('chartdiv');

    // Set themes
    root.setThemes([
        am5themes_Animated.new(root),
    ]);

    // Create chart
    let chart = root.container.children.push(
        am5xy.XYChart.new(root, {
            focusable: true,
            panX: true,
            panY: true,
            wheelX: 'panX',
            wheelY: 'zoomX',
        }),
    );

    // Create axes
    let xAxis = chart.xAxes.push(
        am5xy.DateAxis.new(root, {
            baseInterval: { timeUnit: 'day', count: 1 },
            renderer: am5xy.AxisRendererX.new(root, {
                pan: 'zoom',
                minorGridEnabled: true,
                minGridDistance: 70,
            }),
            tooltip: am5.Tooltip.new(root, {}),
        }),
    );

    let yAxis = chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
            renderer: am5xy.AxisRendererY.new(root, {
                pan: 'zoom',
            }),
        }),
    );

    // Add series
    let series = chart.series.push(
        am5xy.CandlestickSeries.new(root, {
            name: 'MDXI',
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: 'close',
            openValueYField: 'open',
            lowValueYField: 'close',
            highValueYField: 'open',
            valueXField: 'date',
            stacked: true,
            tooltip: am5.Tooltip.new(root, {
                pointerOrientation: 'horizontal',
                labelText:
                    'open: {openValueY}\nlow: {lowValueY}\nhigh: {highValueY}\nclose: {valueY}\nmedian: {median}',
            }),
        }),
    );

    let series2 = chart.series.push(
        am5xy.CandlestickSeries.new(root, {
            name: 'wefwdfwd',
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: 'open',
            openValueYField: 'low',
            lowValueYField: 'low',
            highValueYField: 'low',
            valueXField: 'date',
            stacked: true,
        }),
    );

    // Add median to data
    data.forEach((item) => {
        item.median = item.low + (item.high - item.low) / 2;
    });

    series.data.processor = am5.DataProcessor.new(root, {
        dateFields: ['date'],
        dateFormat: 'yyyy-MM-dd',
    });

    series.data.setAll(data);
    series2.data.setAll(data);

    // Median series
    let medianSeries = chart.series.push(
        am5xy.StepLineSeries.new(root, {
            stroke: am5.color(0xff0000),
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: 'median',
            valueXField: 'date',
            noRisers: true,
        }),
    );

    medianSeries.data.setAll(data);

    // Add cursor
    let cursor = chart.set(
        'cursor',
        am5xy.XYCursor.new(root, {
            xAxis: xAxis,
        }),
    );
    cursor.lineY.set('visible', false);

    // Make stuff animate on load
    series.appear(1000, 100);
    series2.appear(1000, 100);
    medianSeries.appear(1000, 100);
    chart.appear(1000, 100);
});
</script>

我可以在版本 5 中看到两种实现箱线图的方法，但我没有得到结果。任何提示将不胜感激。

1. 更改烛台系列元素的颜色，添加三角形中线
2. 堆叠多个烛台元素

Answer 1

我发现要创建这样的烛台图，我们需要使用 ColumnSeries 而不是 CandlestickSeries

const boxplotSectionSeries = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    name: "boxplotSection",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "upper",
    openValueYField: "up",
    categoryXField: "category",
    clustered: false,
    fill: am5.color("#FFFFFF"),
  })
);
boxplotSectionSeries.columns.template.setAll({
  width: 50,
  strokeWidth: 2,
  tooltipText: " {openValueY}\nUpper: {valueY}",
  tooltipY: am5.percent(10),
});
boxplotSectionSeries.data.setAll(data);



clustered: false, //will make the series stack
width: 50, // sets the width
fill: am5.color("#FFFFFF"), // sets the color

希望这对某人有帮助