Javascript Chart.js条形图，带有开关/单选按钮，用于分组数据/故障排除条形图颜色

我的主要目标是创建一个开关/单选按钮来分组数据（而不是在顶部设置过滤器）。请查看屏幕截图以供参考：

是否可以将数据分组并将过滤器按钮转换为开关

如果不可能，我的计划B是一次显示所有数据，并保持过滤器在顶部。 下面是代码和JSFIDLE链接：

<!-- Charts library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

<div class="chart-wrapper">
  <canvas id="myChart" width="400" height="200"></canvas>
  <script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
      data: {
        labels: ["option 1", "option 2"],

            datasets: [
        {
        label: 'yes',
        data: [714,233],
        backgroundColor: '#004831',
        },
        {
        label: 'no',
        data: [800, 451],
        backgroundColor: '#76B900'
        }
            ]},

        options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
            }
            }]
        }
        }
        });
    </script>
</div>

var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“选项1”、“选项2”]，
数据集：[
{
标签：'是'，
数据：[714233]，
背景颜色：“#004831”，
},
{
标签：‘否’，
数据：[800451]，
背景颜色：“#76B900”
}
]},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});

我提前感谢你的帮助

---

谢谢

它是这样工作的

var图表=null；
var图表数据={
标签：[“问题1”，“问题2']，
数据集：[
{标签：'是'，背景色：'#004831'，数据：[714233]}，
{标签：'否'，背景色：'#76B900'，数据：[800451]}
]
};
var图表选项={
工具提示：{mode:'index'，intersect:true}，
图例：{display:false}，
回答：是的，
比例：{
xAxes：[{
滴答声：{beginAtZero:true}，
是的
}],
雅克斯：[{
滴答声：{beginAtZero:true}，
错误：错误
}]
}
};
$（函数（）{
图表=新图表（$（“#图表”）{
类型：'bar'，
数据：图表数据，
选项：图表选项
});
$（“输入#切换[type='checkbox']）。单击（函数（事件）{
var isStacked=假；
如果（$（this）.is（':checked'））{
isStacked=真；
}否则{
isStacked=假；
}
chart.options.scales={
xAxes:[{stacked:isStacked}]，
yAxes:[{堆叠：isStacked}]
};
chart.update（）；
});
});
画布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
.切换{
位置：相对位置；
保证金：20px自动；
宽度：55px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
}
.切换复选框{
显示：无；
}
.切换标签{
显示：块；溢出：隐藏；光标：指针；
高度：20px；填充：0；线条高度：20px；
边框：0px实心#FFFFFF；边框半径：30px；
背景色：#9E9E9E；
}
.切换标签：在{
内容：“；
显示：块；宽度：30px；边距：-5px；
背景：#FFFFFF；
位置：绝对；顶部：0；底部：0；
右：31px；
边界半径：30px；
盒影：0 6px 12px 0px#757575；
}
.toggle复选框：选中+.onoffswitch标签{
背景色：#42A5F5；
}
.toggle复选框：选中+。切换标签，.toggle复选框：选中+。切换标签：之前{
边框颜色：#42A5F5；
}
.切换复选框：选中+.切换标签.切换内部{
左边距：0；
}
.切换复选框：选中+。切换标签：之前{
右：0px；
背景色：#2196F3；
盒影：3px6px18px0pxrgba（0,0,0,0.2）；
}

谢谢！但为什么只显示一个酒吧？我看到你在每个实例中输入了两个条的编号..很抱歉。我刚刚添加了另一个屏幕截图。不，我的意思是每个实例有两个条（是和否）。@Marcio同时更新了脚本；问题是，有四个值要绘制，而您的屏幕截图一次只显示两个值。谢谢！嗯，我的代码只是一个“计划b”，因为我认为“计划a”（截图）是不可能的。我需要两个值来绘制（不是四个），但它们从“是”和“否”更改。所以：如果是，选项1=714；如果不是，选项800。。。选项2=233是yes/451，如果不是。这有意义吗？@Marcio相应地更新了它，就好像它们是轮询结果一样
chart.js
基本上是将长度相等的数组作为输入数据集，然后根据它们的索引绘制值；它不同于其他图表库，在这些图表库中可以简单地定义系列。在IDE中，这可能比在这个代码段编辑器中更容易调整，而不需要最少的调试器。