Javascript 如何使用开关返回数据？_Javascript_Html_Chart.js

Javascript 如何使用开关返回数据？

javascript html chart.js

Javascript 如何使用开关返回数据？,javascript,html,chart.js,Javascript,Html,Chart.js,我有一个图表（使用chartjs）和一个开关按钮。当我点击开关时，新的数据将被添加到图表中（并删除以前的数据）。但我想做的是，当我点击返回开关时，它会显示以前的数据这是我的密码：猫科动物 VarTest1=[0,10,5,2,20,30,45,60,43,22,11,23]； VarTest2=[90,80,75,62,50,40,35,11,2,24,28,34]； var ctx=document.getElementById（'myChart'）.getContext（'2d'）；

我有一个图表（使用chartjs）和一个开关按钮。当我点击开关时，新的数据将被添加到图表中（并删除以前的数据）。但我想做的是，当我点击返回开关时，它会显示以前的数据

这是我的密码：


猫科动物
VarTest1=[0,10,5,2,20,30,45,60,43,22,11,23]；
VarTest2=[90,80,75,62,50,40,35,11,2,24,28,34]；
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var图表=新图表（ctx{
//我们要创建的图表类型
键入：“行”，
//我们的数据集的数据
数据：{
标签：[“一月”、“二月”、“测试3”、“测试4”、“测试5”、“测试6”、“测试7”、“测试9”、“测试10”、“测试11”、“测试12]”，
数据集：[{
标签：“我的测试1”，
填充：假，
边框颜色：“rgb（255，99，132）”，
数据：test1，
}]
},
//配置选项在这里
选项：{}
});
函数updateChart（）{
chart.data.dataset[0]。label='My test2'；
chart.data.dataset[0].data=test2；
chart.data.dataset[0].borderColor='#F1FC00'；
chart.update（）；
}

您不能返回，因为在

updateChart

方法中，您总是使用

test2

数据和

My test2

标题

您需要一种方法来跟踪当前状态（打开或关闭类别），并决定在更改标题和数据时使用哪个标题和数据

有多种方法可以做到这一点，这里有一种：

/*
  These are constants and represent the two different chart modes.
  You can come up with more descriptive names
*/
const CHART_MODE_1 = 'CHART_MODE_1'
const CHART_MODE_2 = 'CHART_MODE_2'

/* Initialise chartMode with correct first state */
var chartMode = CHART_MODE_1

function updateChart(){
   if (chartMode === CHART_MODE_1) {
     /* Update your chart with data2 here and switch to chartMode 2 */
   } else {
     /* Update your chart with data1 here and switch to chartMode 1 */
   }
}

同样，有多种方法可以实现这一目标。重要的是，你需要一些方法来跟踪你当前的状态，并决定当你改变它时该做什么

您还可以使用integer跟踪您的状态：


let toggleCounter = 0

function updateChart(){
   /* This time you can check if your counter is a prime number */
   if (i % 2 === 0) {
     /* Update your chart with data2 here and switch to chartMode 2 */
   } else {
     /* Update your chart with data1 here and switch to chartMode 1 */
   }
   /* Increment your toggleCounter (change your state) */
   toggleCounter++
}

下面的代码片段解决了您的问题：


猫科动物
VarTest1=[0,10,5,2,20,30,45,60,43,22,11,23]；
VarTest2=[90,80,75,62,50,40,35,11,2,24,28,34]；
常量图表模式=图表模式
const CHART_MODE_2='CHART_MODE_2'
var chartMode=图表模式1
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var图表=新图表（ctx{
键入：“行”，
数据：{
标签：[“一月”、“二月”、“测试3”、“测试4”、“测试5”、“测试6”、“测试7”、“测试9”、“测试10”、“测试11”、“测试12]”，
数据集：[{
标签：“我的测试1”，
填充：假，
边框颜色：“rgb（255，99，132）”，
数据：test1，
}]
},
选项：{}
});
函数updateChart（）{
if（图表模式===图表模式1）{
图表模式=图表模式2
chart.data.dataset[0]。label='My test2'；
chart.data.dataset[0].data=test2；
chart.data.dataset[0].borderColor='#F1FC00'；
}否则{
图表模式=图表模式1
chart.data.dataset[0]。label='My test1'；
chart.data.dataset[0].data=test1；
chart.data.dataset[0].borderColor='rgb（255，99，132）'；
}
chart.update（）；
}