Chart.js在重新加载时无法加载

Question

我在Meteor中使用Chart.js遇到了一个奇怪的问题。

页面上有一个图表，它使用 Session.get('values'); 获取数据。如果您使用菜单更改路由，则可以正常工作。但是，如果您按下页面上的刷新按钮，则该图表将加载，但数据不会加载。当我将鼠标悬停在图表上的数据点上时，它只显示标签，没有任何数字或其他东西。

如果我在控制台中运行Session.get('values');，返回的数据就很好，而且只要我点击一次菜单项，然后再次点击其中一个带有图表的选项，它就能正常加载！

我使用Template.templatename.onRendered();来加载图表数据，否则图表根本无法加载。

感谢您的帮助！

- Alaister Young

---

当你说重新加载按钮时，你是指浏览器的刷新按钮吗？ - Brett McLain

你在哪里设置“Session”值？ - Nate

另外，渲染图表的代码是什么样子的？如果需要重新渲染，则首次渲染图表的代码可能会有所不同。我将图表的状态存储起来以指示它是否已加载；如果已加载，则使用不同的代码更新图表中的数据。 - Brett McLain

我不知道为什么图表在重新加载时无法工作，但我建议确保在重新渲染图表时使用正确的函数，即首先删除数据再添加，或者更新现有数据：.update()在Chart实例上调用update()将使用任何更新的值重新呈现图表，允许您编辑多个现有点的值，然后在一个动画渲染循环中呈现这些值。`timeChart.datasets = lineChartData; timeChart.update();` - Brett McLain

我遇到了同样的问题，如果在相同的页面上访问URL，它不会加载。但是，如果我在浏览器上点击实际的更新按钮，它就会加载。但是，如果使用URL中的不同属性访问相同的URL，则会破坏图形。 - Jason G

Answer 1

发现了一个简单的解决方案。

只需声明一个新变量，例如chartUpdated。 然后在您的created或mounted钩子中，在将动态值更新到图表对象之后，将this.chartUpdated更新为true。

data() {
    return {
      chartUpdated: false,
      areaChartData: {
        labels: [],
        datasets: [
          {
            label: '',
            data: [],
            borderColor: colors.themeColor1,
            pointBackgroundColor: colors.foregroundColor,
            pointBorderColor: colors.themeColor1,
            pointHoverBackgroundColor: colors.themeColor1,
            pointHoverBorderColor: colors.foregroundColor,
            pointRadius: 4,
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            fill: true,
            borderWidth: 2,
            backgroundColor: colors.themeColor1_10
          }
        ]
      }
    };
  },
  async created() {
    const response = await axios.get('https://yourapi.com')
    const data = response.data.data
    this.areaChartData.labels = data.map((x) => x.day)
    this.areaChartData.datasets[0].data = data.map((x) => x.total_member)
    this.chartUpdated = true
  }

然后在你的模板中

<area-chart v-if="chartUpdated" :data="areaChartData" container-class="chart" shadow />

- HNG