每次单击按钮时如何重新加载/动画高图表？

问题描述 投票：0回答：1

我正在使用高图表。一切似乎都运转良好。我正在努力增强加载过程。默认情况下，当页面加载时，图表显示“ZX”的数据。当我单击“XZ”或“X”按钮时，图表没有动画。它立即显示。有没有一种方法可以在每次用户单击任何按钮时为图表添加动画效果？这是我的代码的链接-

https://live.datatables.net/nikusucu/5/edit

function initializeChart(chartId, tableId, chartTitle) {
    // Create DataTable
    const table = new DataTable(tableId, {
        searching: false,
        info: false,
        paging: false,
        sort: false
    });

    // Create chart
    const chart = Highcharts.chart(chartId, {
        chart: {
            type: 'pie',
            styledMode: false
          
        },
        title: {
            text: chartTitle
        },
       colors: ['#003489', '#ED7D31', '#A5A5A5', '#FFC000', '#5B9BD5', '#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        tooltip: {
            pointFormat: '</b> {point.y:.1f}%'
        },
        series: [
            {
                data: chartData(table)
            }
             
        ],
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                series: {
            animation: {
                duration: 2000
            }
        },
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                },
                showInLegend: true  // Show legends
            }
        }
    });

    // On each draw, update the data in the chart
    table.on('draw', function () {
        chart.series[0].setData(chartData(table));
    });

    function chartData(table) {
        var data = [];
        table.rows().every(function () {
            var row = this.data();
            data.push({
                name: row[0],  // Assuming the first column is the name
                y: parseFloat(row[1])  // Assuming the second column is the numeric value
            });
        });

        return data;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    // Check if Highcharts is defined before calling the function
    if (typeof Highcharts !== 'undefined') {
        initializeChart('demo-output', '#example', 'test1');
        initializeChart('demo-output2', '#example1', 'test 2');

        var allSeriesData = [];
        var categories = [];
        $('#example2').data('scrollX-custom', true);

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

                // get the x-axis caregories from the table headings:
                var headers = api.columns().header().toArray();
                headers.forEach(function (heading, index) {
                    if (index > 0 && index < headers.length - 1) {
                        categories.push($(heading).html());
                    }
                });

                // get the seris data as an array of numbers from the table row data:
                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 - 1) {
                            group.data.push(parseFloat(cell.replace(/,/g, '')));
                        }
                    });
                    allSeriesData.push(group);
                });
            }
        });

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

        var myChart = Highcharts.chart("chart-A", {
            chart: {
                type: "column",
                borderColor: 'black',
                borderWidth: 1,
                marginTop: 50
            },
            legend: {
                symbolRadius: 0,
                itemStyle: {
                    color: '#000000',
                    fontSize: '16px'
                }
            },
            
            credits: {
                enabled: false
            },
         
            title: {
                text: "Test3"
            },
            xAxis: {
                categories: categories,
                labels: {
                    style: {
                        fontWeight: '600',
                        fontSize: '16px',
                        color: '#000000'
                    }
                }
            },
            yAxis: {
                title: false,
                tickInterval: 10,
                max: 70,
                labels: {
                    formatter: function () {
                        return Highcharts.numberFormat(this.value, 0);
                    },
                    style: {
                        fontWeight: '600',
                        fontSize: '16px',
                        color: '#000000'
                    }
                }
            },
            series: allSeriesData
        });

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

    // Toggle chart visibility based on button click
    if (buttonId === 'button-2') {
        $('#chart1').hide();
        $('#chart2').show();
        $('#chart3').hide();
    } else if (buttonId === 'button-3') {
        $('#chart1').hide();
        $('#chart2').hide();
        $('#chart3').show();
    } else {
        // Default case, show chart1
        $('#chart1').show();
        $('#chart2').hide();
        $('#chart3').hide();
    }

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

// Set default highlight on button-2023
$('#button-1').addClass('active');
    }
});
<!DOCTYPE html>
<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="button-1" class="usa-button usa-button--outline">zx</button>
<button id="button-2" class="usa-button usa-button--outline">xz</button>
<button id="button-3" class="usa-button usa-button--outline">x</button>
  </div>
<div id="chart1">
<div id="demo-output" class="chart-display" style=" margin-bottom: 2em; height: 650px; border: solid 1px lightgray;"></div>

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

</thead>
<tr>
<td scope="row">1</td>
<td>3.2%</td>
</tr>

<tr>
<td scope="row">2</td>
<td>1.1%</td>
</tr>

<tr>
<td scope="row">3</td>
<td>1.6%</td>
</tr>

<tr>
<td scope="row">4</td>
<td>1.9%</td>
</tr>

<tr>
<td scope="row">5</td>
<td>2.5%</td>
</tr>

<tr>
<td scope="row">6</td>
<td>4.4%</td>
</tr>

<tr>
<td scope="row">7</td>
<td>18.6%</td>
</tr>

<tr>
<td scope="row">8</td>
<td>1.1%</td>
</tr>

<tr>
<td scope="row">9</td>
<td>1.4%</td>
</tr>

<tr>
<td scope="row">10</td>
<td>1.9%</td>
</tr>

<tr>
<td scope="row">11</td>
<td>2.2%</td>
</tr>

<tr>
<td scope="row">12</td>
<td>3.4%</td>
</tr>

<tr>
<td scope="row">13</td>
<td>5.0%</td>
</tr>

<tr>
<td scope="row">14</td>
<td>51.9%</td>
</tr>
</table>
</div>

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

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

</thead>
<tr>
<td scope="row">2</td>
<td>18.6</td>
</tr>

<tr>
<td scope="row">3</td>
<td>0</td>
</tr>

<tr>
<td scope="row">4</td>
<td>0</td>
</tr>

<tr>
<td scope="row">5</td>
<td>5.0</td>
</tr>

<tr>
<td scope="row">6</td>
<td>2.2</td>
</tr>

<tr>
<td scope="row">7</td>
<td>0</td>
</tr>

<tr>
<td scope="row">8</td>
<td>2.5</td>
</tr>

<tr>
<td scope="row">9</td>
<td>3.4</td>
</tr>

<tr>
<td scope="row">10</td>
<td>4.4</td>
</tr>

<tr>
<td scope="row">11</td>
<td>0</td>
</tr>

<tr>
<td scope="row">12</td>
<td>0</td>
</tr>

<tr>
<td scope="row">13</td>
<td>12.2</td>
</tr>
</table>
</div>

<div id="chart3" style=" display: none;"><!--<div style=" text-align: center;"><img src="/images/complaint-data-chart-1.svg" alt="Cases Received From Consumers" title="Cases Received From Consumers" style=" width: 700px;" /></div> -->
<div id="chart-A" style=" width: 100%; height: 400px;"></div>

<table class="row-border stripe dt-right dataTable no-footer dtr-inline" id="example2" style=" width: 100%;"><thead>
<tr>
<th scope="col" style=" text-align: center; width: 12%;">Year</th>
<th scope="col" style=" text-align: center; width: 22%;">1</th>
<th scope="col" style=" text-align: center; width: 22%;">2</th>
<th scope="col" style=" text-align: center; width: 22%;">3</th>
<th scope="col" style=" text-align: center; width: 22%;">4</th>
<th scope="col" style=" text-align: center; width: 22%;">5</th>
<th scope="col" style=" text-align: center; width: 22%;">6</th>
</tr>

</thead>
<tr>
<td scope="row" style=" text-align: center;">2019</td>
<td style=" text-align: center;">42.5%</td>
<td style=" text-align: center;">30.1%</td>
<td style=" text-align: center;">12.5%</td>
<td style=" text-align: center;">6%</td>
<td style=" text-align: center;">11.3%</td>
<td style=" text-align: center;">10%</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">2020</td>
<td style=" text-align: center;">50.01%</td>
<td style=" text-align: center;">26.5%</td>
<td style=" text-align: center;">15%</td>
<td style=" text-align: center;">12%</td>
<td style=" text-align: center;">11%</td>
<td style=" text-align: center;">10%</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">2021</td>
<td style=" text-align: center;">29.5%</td>
<td style=" text-align: center;">35%</td>
<td style=" text-align: center;">66%</td>
<td style=" text-align: center;">7%</td>
<td style=" text-align: center;">6%</td>
<td style=" text-align: center;">56%</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">2022</td>
<td style=" text-align: center;">40.1%</td>
<td style=" text-align: center;">76%</td>
<td style=" text-align: center;">7%</td>
<td style=" text-align: center;">8%</td>
<td style=" text-align: center;">86%</td>
<td style=" text-align: center;">54%</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">2023</td>
<td style=" text-align: center;">38.9%</td>
<td style=" text-align: center;">55%</td>
<td style=" text-align: center;">5%</td>
<td style=" text-align: center;">45%</td>
<td style=" text-align: center;">55%</td>
<td style=" text-align: center;">55%</td>
</tr>
</table>
</div>

javascript highcharts
1个回答
0
投票

您的问题已在 highcharts 论坛得到解答。

问：显示/隐藏图表时的动画

A：最简单的方法是单击时再次渲染图表：https://codepen.io/anon/pen/pMzLNj?editors=0010

var chart = Highcharts.chart('container', chartOptions),
    hidden = false;

function showHide(){
   if (!hidden) {
      chart.destroy()
   } else {
     chart = Highcharts.chart('container', chartOptions)
   }
  hidden = !hidden;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.