条形图未正确显示轴和图例值

Question

我正在开发一个使用数据表检索高图表的页面。按钮一和按钮三的图表很好。我面临的问题是按钮二 - 条形图。对于图表，我尝试将 2022 列中的值显示为 Y 轴，将百分比列显示为 X 轴。图例还应显示 Y 轴列。我缺少什么？这是我的代码。

// Function to initialize Highcharts charts
function initializeChart(chartId, chartTitle, chartData, chartType) {
    Highcharts.chart(chartId, {
        chart: {
            type: chartType,
            styledMode: false
        },
        title: {
            text: chartTitle
        },
        colors: ['#1a4480', '#e52207', '#e66f0e', '#ffbe2e', '#fee685', '#538200', '#04c585', '#97d4ea', '#009ec1', '#0076d6', '#adadad', '#8168b3', '#d72d79', '#f2938c'],
        tooltip: {
            pointFormat: '</b> {point.y:.1f}%'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%',
                    style: {
                        fontSize: "12px"
                    }
                },
                showInLegend: true
            },
            pie: {
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%',
                    style: {
                        fontSize: "12px"
                    }
                },
                showInLegend: true
            }
        },
        legend: {
            symbolRadius: 0,
            itemStyle: {
                color: '#000000',
                fontSize: '16px'
            }
        },
        series: [{
            data: chartData
        }]
    });
}

// Function to retrieve chart data from DataTable
function getChartData(table) {
    const data = [];
    table.rows().every(function () {
        const row = this.data();
        data.push({
            name: row[0],
            y: parseFloat(row[1])
        });
    });
    return data;
}

// Check if DataTable and Highcharts are defined before calling the function
if (typeof DataTable !== 'undefined' && typeof Highcharts !== 'undefined') {
    initializeCharts();
}

function initializeCharts() {
    const table1 = new DataTable('#example1', {
        searching: false,
        info: true,
        paging: false,
        sort: false
    });
    const table2 = new DataTable('#example', {
        searching: false,
        info: true,
        paging: false,
        sort: false
    });

    const chartData1 = getChartData(table1);
    const chartData2 = getChartData(table2);

    initializeChart('demo-output', 'FY 2023', chartData1, 'pie');
    initializeChart('demo-output2', 'FY 2022', chartData2, 'bar');

    var categories = [];
    var allSeriesData = [];

    var table = $("#example2").DataTable({
        searching: false,
        responsive: true,
        lengthChange: false,
        ordering: false,
        info: false,
        paging: false,
        initComplete: function (settings, json) {
            let api = new $.fn.dataTable.Api(settings);

            var headers = api.columns().header().toArray();
            headers.forEach(function (heading, index) {
                if (index > 0 && index < headers.length) {
                    categories.push($(heading).html());
                }
            });

            let rows = api.rows().data().toArray();
            rows.forEach(function (row) {
                group = {
                    name: '',
                    data: []
                };
                row.forEach(function (cell, idx) {
                    if (idx == 0) {
                        group.name = cell;
                    } else if (idx < row.length) {
                        group.data.push(parseFloat(cell.replace(/,/g, '')));
                    }
                });
                allSeriesData.push(group);
            });
        }
    });

    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        }
    });

    var myChart = Highcharts.chart("chart-A", {
        chart: {
            type: "column",
            borderColor: 'lightgray',
            borderWidth: 1,
            marginTop: 50
        },
        tooltip: {
            headerFormat: '{point.key}<br/>',
            pointFormat: '{series.name}: <b>{point.y:.1f}%</b>'
        },
        legend: {
            symbolRadius: 0,
            itemStyle: {
                color: '#000000',
                fontSize: '16px'
            }
        },
        colors: ['#003489', '#ED7D31', '#A5A5A5', '#FFC000', '#5B9BD5'],
        credits: {
            enabled: false
        },
        title: {
            text: "Trends"
        },
        xAxis: {
            categories: categories,
            labels: {
                style: {
                    fontWeight: '600',
                    fontSize: '16px',
                    color: '#000000'
                }
            }
        },
        yAxis: {
            title: false,
            tickInterval: 10,
            max: 60,
            labels: {
                formatter: function () {
                    return Highcharts.numberFormat(this.value, 0);
                },
                style: {
                    fontWeight: '600',
                    fontSize: '16px',
                    color: '#000000'
                }
            }
        },
        series: allSeriesData
    });

    $('.usa-button').on('click', function () {
        var buttonId = $(this).attr('id');

        if (buttonId === 'previous') {
            $('#chart2').show();
            $('#chart1').hide();
            $('#chart3').hide();
        } else if (buttonId === 'trend') {
            $('#chart2').hide();
            $('#chart1').hide();
            $('#chart3').show();
        } else {
            $('#chart2').hide();
            $('#chart1').show();
            $('#chart3').hide();
        }

        $('.usa-button').removeClass('active');
        $(this).addClass('active');
    });

    $('#current').addClass('active');
}

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/dataTables.js"></script>

 <script src="https://code.highcharts.com/highcharts.js"></script>

  </head>
  <body>




<div class="ar-controls grid-row tablet:flex-justify-start">
<div class="tablet:grid-col-auto margin-bottom-205"><button id="current" class="usa-button usa-button--outline" title="Select to see related information below">one</button> <button id="previous" class="usa-button usa-button--outline" title="Select to see related information below">two</button> <button id="trend" class="usa-button usa-button--outline" title="Select to see related information below">three</button></div>
</div>

<div id="chart1">
<div id="demo-output" class="chart-display" style=" margin-bottom: 2em; height: 500px; border: solid 1px lightgray;"></div>

<table id="example1" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">2023</th>
<th scope="col">Percent</th>
</tr>

</thead>
<tr>
<td scope="row">ABC</td>
<td>45.9%</td>
</tr>

<tr>
<td scope="row">DEF</td>
<td>22.0%</td>
</tr>

<tr>
<td scope="row">GHI</td>
<td>13.6%</td>
</tr>

</table>
</div>

<div id="chart2" style=" display: none;">
<div id="demo-output2" class="chart-display2" style=" margin-bottom: 2em; height: 680px; border: solid 1px lightgray;"></div>

<table id="example" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">2022</th>
<th scope="col">Percent</th>
</tr>

</thead>
<tr>
<td>123</td>
<td>51.90%</td>
</tr>

<tr>
<td>456</td>
<td>18.60%</td>
</tr>

</table>
</div>

<div id="chart3" style=" display: none;">
<div id="chart-A" style=" width: 100%; height: 500px;"></div>

<table class="row-border stripe no-footer cell-border padding-top-5" id="example2" style=" width: 100%;"><thead>
<tr>
<th>Year</th>
<th>column1</th>
<th>column2</th>
<th>column3</th>

</tr>

</thead>
<tr>
<td scope="row" style=" text-align: left; white-space: nowrap;">FY19</td>
<td style=" text-align: left;">42.7%</td>
<td style=" text-align: left;">17.3%</td>
<td style=" text-align: left;">9.5%</td>

</tr>

<tr>
<td scope="row" style=" text-align: left;">FY20</td>
<td style=" text-align: left;">49.5%</td>
<td style=" text-align: left;">16.3%</td>
<td style=" text-align: left;">3.4%</td>

</tr>


</table>
</div>
</div>

Answer 1

默认情况下，图例包含图表每个系列的项目。在条形图中，您有一个包含两个数据点的系列。为了显示图例中的每一列，您可以将数据拆分为单独的系列：

series: [{
  data: [{x: 0, y: 65.5 }],
  name: 'Bar A' 
}, {
  data: [{ x: 1, y: 54.3 }],
  name: 'Bar B' 
}]

演示：https://jsfiddle.net/BlackLabel/wd58exon/

API： https://api.highcharts.com/highcharts/legend

您还可以创建自定义图例，其中每个点将被分配为图例容器内的一个项目。

文档：https://highcharts.freshdesk.com/a/solutions/articles/44002324228