Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/462.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Chart.js从图例中删除if数据集值的标签_Javascript_Chart.js_Label_Legend - Fatal编程技术网

Javascript Chart.js从图例中删除if数据集值的标签

Javascript Chart.js从图例中删除if数据集值的标签,javascript,chart.js,label,legend,Javascript,Chart.js,Label,Legend,我有一个包含多个数据集的图表。如果数据集中的所有值都为空,我希望图例中数据集的标签不可见。我已经找到了一些解决方案,但只有在初始配置中声明数据时,它们才起作用。在我的例子中,它是动态更新的 代码如下: self.initGraph = function () { ctxWell = document.getElementById("wellChart").getContext('2d'); if (wellChart != undefin

我有一个包含多个数据集的图表。如果数据集中的所有值都为空,我希望图例中数据集的标签不可见。我已经找到了一些解决方案,但只有在初始配置中声明数据时,它们才起作用。在我的例子中,它是动态更新的

代码如下:

 self.initGraph = function () {

 ctxWell = document.getElementById("wellChart").getContext('2d');
                if (wellChart != undefined)
                    wellChart.destroy();

                wellChart = new Chart(ctxWell, {
                    type: 'line',
                    data: {
                        labels: [],
                        datasets: [
                            {
                                backgroundColor: reportColor.Green,
                                borderColor: reportColor.Green,
                                label: 'Motor Frequency Hz',
                                yAxisID: 'y-axis-2',
                                data: [],
                                borderWidth: 1,
                                pointRadius: 0,
                                fill: false
                            },
                            {
                                backgroundColor: reportColor.Turquoise,
                                borderColor: reportColor.Turquoise,
                                label: 'Pump Discharge Pressure ' + helpers.getListSelectedValue(self.dischargePressureID(), self.pressureList()),
                                yAxisID: 'y-axis-1',
                                data: [],
                                borderWidth: 1,
                                pointRadius: 0,
                                fill: false
                            }
                            ,
        ]
                    },
                    options: {
                        maintainAspectRatio: false,
                        animation: {
                            duration: 0
                        },

                        scales: {
                            yAxes: [
                            {
                                id: 'y-axis-1',
                                // stacked: true,
                                 scaleLabel: {
                                    display: true,
                                    fontSize: 18,
                                     labelString: helpers.getListSelectedValue(self.intakePressureID(), self.pressureList())
                                 },
                                ticks: {
                                    beginAtZero: true
                                }
                            },

                            {
                                id: 'y-axis-2',
                                position: 'right',
                                display: self.checkAxis(),
                                scaleLabel: {
                                    display: self.checkAxis(),
                                    fontSize: 18,
                                    labelString: "Hz, " + helpers.getListSelectedValue(self.motorTemperatureID(), self.temperatureList())
                                },
                                ticks: {
                                    beginAtZero: true
                                }
                            }
                            ]
                        },
                        elements: {
                            line: {
                                tension: 0.000001
                            }
                        },
                        legend: {
                            display: true,
                            onClick: wellChartLegendClick,
                        
                            }
                          
                        },
                      
                    }
                });
            wellChart.update();
            };

            self.updateWellDaily = function () {
                var chart = wellChart;
                chart.data.labels = [];
                for (var j = 0; j < chart.data.datasets.length; j++) {
                    chart.data.datasets[j].data = [];
                }

                for (var i = 0; i < self.wellResults().length; i++) {
                    chart.data.labels.push(self.wellResults()[i].reportedTime);
                    chart.data.datasets[0].data.push(self.wellResults()[i].motorFrequency);
                    chart.data.datasets[1].data.push(self.wellResults()[i].pumpDischargePressure);
                    
                }
                chart.update();

            };


     self.initGraph();
     self.updateWellDaily();

self.initGraph=函数(){
ctxWell=document.getElementById(“wellChart”).getContext(“2d”);
如果(井图!=未定义)
wellChart.destroy();
井图=新图表(CTX井{
键入:“行”,
数据:{
标签:[],
数据集:[
{
背景颜色:reportColor.绿色,
边框颜色:reportColor.绿色,
标签:“电机频率Hz”,
yAxisID:'y轴-2',
数据:[],
边框宽度:1,
点半径:0,
填充:假
},
{
背景颜色:reportColor.绿松石色,
borderColor:reportColor.绿松石色,
标签:“泵排放压力”+helpers.getListSelectedValue(self.dischargePressureID(),self.pressureList()),
yAxisID:'y轴-1',
数据:[],
边框宽度:1,
点半径:0,
填充:假
}
,
]
},
选项:{
MaintaintAspectRatio:false,
动画:{
持续时间:0
},
比例:{
雅克斯:[
{
id:'y轴-1',
//对,,
scaleLabel:{
显示:对,
尺码:18,
labelString:helpers.getListSelectedValue(self.intakPressureId(),self.pressureList())
},
滴答声:{
贝吉纳泽罗:是的
}
},
{
id:'y轴-2',
位置:'右',
显示:self.checkAxis(),
scaleLabel:{
显示:self.checkAxis(),
尺码:18,
标签字符串:“Hz,”+helpers.getListSelectedValue(self.motorTemperatureID(),self.temperatureList())
},
滴答声:{
贝吉纳泽罗:是的
}
}
]
},
要素:{
行:{
张力:0.000001
}
},
图例:{
显示:对,
onClick:wellChartLegendClick,
}
},
}
});
wellChart.update();
};
self.updateWellDaily=函数(){
var图=井图;
chart.data.labels=[];
对于(var j=0;j
图例过滤器功能可用于此目的,如果您告诉它隐藏数据集中所有数据为零的标签,它将动态更新,请参见示例:

var选项={
键入:“行”,
数据:{
标签:[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”],
数据集:[{
标签:“#投票数”,
数据:[12,19,3,5,2,0],
边框宽度:1,
背景颜色:[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]
},
{
标签:“#计数”,
数据:[1,2,3,4,5,2],
边框宽度:1,
背景颜色:[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]
}
]
},
选项:{
插件:{
图例:{
标签:{
筛选器:(legendItem,chartData)=>(!chartData.datasets[legendItem.datasetIndex].data.every(item=>item==0))
}
}
}
}
}
var ctx=document.getElementById('chartJSContainer').getContext('2d');
常量图表=新图表(ctx,选项);
document.getElementById(“tt”).addEventListener(“单击”,()=>{
chart.data.datasets[1]。数据=[0,0,0,0,0];
图表更新()
});

更改数据

谢谢!工作得很有魅力!