带有 try catch 的 ChartJs

Question

所以我正在尝试制作一个使用 ChartJS 的 JS 函数，函数获得的 variable/data 是一个 JSON 对象。我之所以用try/catch是因为下面两行：

let labels = json_data.data.map(e => e.StartTime);
let data = json_data.data.map(e => e.StatusId);

如果有任何数据被设置，则不总是设置，但如果没有则唯一设置

let data = json_data.message.map(e => e.message);

除非在页面加载时，否则什么都不设置。

JSON 对象在 <Select> 下拉列表更改时更改，如果其中有数据，则加载 canvas，但如果用户 select 一个没有数据，我希望嫁接是empty/destroyed，但是我不能这样做，因为我在try catch中，如果我也在catch中定义它，那么它说ID已经是正在使用。我该怎么做才能在捕获中“reset/destroy”它？

function chartJSLoad(json_data) {
    try {
        let labels = json_data.data.map(e => e.StartTime);
        let data = json_data.data.map(e => e.StatusId);

        console.log(labels);
        console.log(data);

        var ctx = document.getElementById('canvaschartjs').getContext('2d');

        var myChart = new Chart(ctx, {
            data: {
                datasets: [{
                    type: 'bar',
                    label: 'Bar Dataset',
                    data: data,
                    backgroundColor: 'rgba(0, 150, 90)',
                    borderColor: 'rgba(0, 255, 90)',
                    order: 2
                }, {
                    type: 'line',
                    label: 'Line Dataset',
                    data: data,
                    backgroundColor: 'rgba(150, 0, 90)',
                    borderColor: 'rgba(255, 0, 90)',
                    order: 1
                }],
                labels: labels
            },
            options: {
                maintainAspectRatio: false,
                responsive: true,
                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true
                    }
                }
            }
        });
    } catch (error) {
        if (typeof json_data !== 'undefined') {
            myChart.destroy();
            alert(json_data.message);
        }
    }
}

Answer 1

您可以使用静态方法 getChart 检查具有该上下文的图表是否已经存在，如果存在，您将获得可以销毁的图表实例：

catch (error) {
  if (typeof json_data !== 'undefined') {
    let chart = Chart.getChart('canvaschartjs');
    if (typeof chart !== 'undefined') {
      chart.destroy()
    }
    alert(json_data.message);
  }
}

实例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
let myChart = new Chart(ctx, options);

let chart = Chart.getChart('chartJSContainer');
if (typeof chart !== 'undefined') {
  chart.destroy() // Does not show anything because of this line, comment it out to show again
}

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

带有 try catch 的 ChartJs

ChartJs with try catch

javascript

chart.js