如何在ChartJS数据结构中放置函数?

qxgroojn  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(162)

我正在做一个网站,其中一个图表使用ChartJS库。这个图表显示,在网站上,所有的数据作为默认。
我的目标是让访问者选择一个不同数量的数据的图表。所以,我做了一个按钮,在图表的顶部,当访问者点击它,必须改变显示的数据数量。
问题是ChartJS使用了JSON对象,而我没有成功地在其中配置不同的行为。

...
      datasets: [
        {
          label: "Exemple",
          data: [
            { x: "Day1", y: 0 },
            { x: "Day2", y: 1 },
            { x: "Day3", y: 2 },
            { x: "Day4", y: 3 },
            { x: "Day5", y: 4 },
            ....
          ],
        ...

我试着在上面放一个事件,比如:

data: mybutton.addEventListener("click", () => {
                  [{x: "Day1", y: 0}]
               },

一个函数,例如:

data: myFunction(),

连一个变量也用函数代入,如:

const myData = () => {
 // function
}

         data: myData,

或者是If else。
什么都没用...你知道吗?

q9yhzks0

q9yhzks01#

我自己找到了解决办法。
我将JSON对象放在一个函数中,放置一个AddEventListener(“click”,function()),针对要修改的JSON部分,并在末尾添加了一个update()。

function chartFunction() {
   ....
   // data before
   datasets: [
       {
         label: "Exemple",
         data: [
           { x: "Day1", y: 0 },
   .....

       button.addEventListener("click", () => {
       (myChart.data.datasets[0].data = [...]).myChart.update();
       });
};

chartFunction();

相关问题