微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ChartJS v2.9.4 - 通过图例隐藏数据集时可能出现故障

如何解决ChartJS v2.9.4 - 通过图例隐藏数据集时可能出现故障

我不熟悉使用任何图表生成库。在我开始这个项目时,v2.9.4 是 ChartJS 的最新版本。

我遇到了特别是一张图表的问题。这是一个混合折线图和堆积条形图,显示七个不同数据集的数据。问题是当点击图例中的第一个指标以隐藏该指标时,它会更改倒数第二个指标的值。

当图表首次加载时,3 年平均值值远高于应有的值。如果我单击 2020 Pickups 将其隐藏,2020 Pickups 会按原样消失,但是 3 Year Average 数据集会减少到正确的值应该在图表加载时出现。

通过迭代循环将查询对象的结果推送到数组中来加载每个指标的值。查看查看源代码表明 3 年平均值 的正确值正在加载到数组中。我有 2020 Pickups 的隐藏前和隐藏后的屏幕截图。

Top is before hiding 2020 Pickups; bottom is after.

不幸的是,我们的开发环境受到限制,所以我没有可以分享的网址。

这是一些代码。它非常广泛,所以为了简洁起见,我只限于相关的内容。 [编辑:重新排列变量的顺序,包括正确的查询名称]

// Javascript
         programOverviewAllLabelsData = [],programOverviewAllLabelsData2 = [],programOverviewAllLabelsData3 = [],programOverviewAllLabelsData4 = [],programOverviewAllLabelsData5 = [],programOverviewAllLabelsData6 = [];
<cfoutput><cfloop from="1" to="52" index="idx">
        programOverviewAllLabelsData.push(<cfif val(overviewPickupsCurrentCY.PU_PICKUP[idx]) gt 0>#val(overviewPickupsCurrentCY.PU_PICKUP[idx])#<cfelse>null</cfif>);
        programOverviewAllLabelsDataTwo.push(<cfif val(overviewPickupsPrevIoUsCY.PU_PICKUP[idx]) gt 0>#val(overviewPickupsPrevIoUsCY.PU_PICKUP[idx])#<cfelse>null</cfif>); 
        programOverviewAllLabelsData3.push(<cfif val(threeYearavg.PU_PICKUP[idx]) gt 0>#NumberFormat(val(threeYearavg.PU_PICKUP[idx]),'9999')#<cfelse>null</cfif>);
        programOverviewAllLabelsData4.push(<cfif val(overviewPickupsCurrentCY.PU_PRESURVEY[idx]) gt 0>#val(overviewPickupsCurrentCY.PU_PRESURVEY[idx])#<cfelse>null</cfif>);
        programOverviewAllLabelsData5.push(<cfif val(overviewPickupsCurrentCY.PU_AWARDED[idx]) gt 0>#val(overviewPickupsCurrentCY.PU_AWARDED[idx])#<cfelse>null</cfif>);
        programOverviewAllLabelsData6.push(<cfif val(overviewPickupsCurrentCY.PU_PREAWARDED[idx]) gt 0>#val(overviewPickupsCurrentCY.PU_PREAWARDED[idx])#<cfelse>null</cfif>);</cfloop></cfoutput>

// Javascript - within ChartJS creating new chart
datasets: [{
    label: 'Peak Season',data: [null,null,100000,null],backgroundColor: '#deffff',borderColor: '#deffff',type: 'line',order: 7,lineTension: 0
        },{
    label: '2021 Total PreAward',data: programOverviewAllLabelsData6,backgroundColor: '#e6af42',borderColor: '#e6af42',order: 5
        },{
    label: '3 Year Average Pickups',data: programOverviewAllLabelsData3,backgroundColor: '#c7c796',borderColor: '#c7c796',order: 6,{
    label: '2021 Total Award',data: programOverviewAllLabelsData5,backgroundColor: '#f8f802',borderColor: '#f8f802',order: 4
        },{
    label: '2021 Total PreSurvey',data: programOverviewAllLabelsData4,backgroundColor: '#6f9822',borderColor: '#6f9822',order: 3
        },{
    label: '2021 Total Pickups',data: programOverviewAllLabelsData,backgroundColor: '#177717',borderColor: '#177717',order: 2
        },{ 
    label: '2020 Total Pickups',data: programOverviewAllLabelsData2,backgroundColor: '#0070c0',borderColor: '#0070c0',fill: false,order: 1,lineTension: 0
        }]

// View Source of page - showing that the values for 3 Year Average are not greater than 11000
     programOverviewAllLabelsData = [],programOverviewAllLabelsData6 = [];
programOverviewAllLabelsDataTwo.push(3550); 
        programOverviewAllLabelsData.push(4132);
        programOverviewAllLabelsData4.push(null);
        programOverviewAllLabelsData5.push(null);
        programOverviewAllLabelsData6.push(106);
        programOverviewAllLabelsData3.push(5220);
        programOverviewAllLabelsDataTwo.push(5082); 
        programOverviewAllLabelsData.push(5553);
        programOverviewAllLabelsData4.push(13);
        programOverviewAllLabelsData5.push(3);
        programOverviewAllLabelsData6.push(141);
        programOverviewAllLabelsData3.push(5081);
        programOverviewAllLabelsDataTwo.push(4798); 
        programOverviewAllLabelsData.push(5140);
        programOverviewAllLabelsData4.push(6);
        programOverviewAllLabelsData5.push(6);
        programOverviewAllLabelsData6.push(137);
        programOverviewAllLabelsData3.push(4833);
        programOverviewAllLabelsDataTwo.push(4418); 
        programOverviewAllLabelsData.push(4457);
        programOverviewAllLabelsData4.push(6);
        programOverviewAllLabelsData5.push(1);
        programOverviewAllLabelsData6.push(143);
        programOverviewAllLabelsData3.push(4792);
        programOverviewAllLabelsDataTwo.push(5020); 
        programOverviewAllLabelsData.push(5478);
        programOverviewAllLabelsData4.push(6);
        programOverviewAllLabelsData5.push(5);
        programOverviewAllLabelsData6.push(156);
        programOverviewAllLabelsData3.push(5141);
        programOverviewAllLabelsDataTwo.push(4182); 
        programOverviewAllLabelsData.push(4221);
        programOverviewAllLabelsData4.push(8);
        programOverviewAllLabelsData5.push(3);
        programOverviewAllLabelsData6.push(119);
        programOverviewAllLabelsData3.push(4402);
        programOverviewAllLabelsDataTwo.push(4753); 
        programOverviewAllLabelsData.push(4609);
        programOverviewAllLabelsData4.push(3);
        programOverviewAllLabelsData5.push(4);
        programOverviewAllLabelsData6.push(152);
        programOverviewAllLabelsData3.push(5161);
        programOverviewAllLabelsDataTwo.push(4595); 
        programOverviewAllLabelsData.push(4654);
        programOverviewAllLabelsData4.push(6);
        programOverviewAllLabelsData5.push(4);
        programOverviewAllLabelsData6.push(191);
        programOverviewAllLabelsData3.push(5148);
        programOverviewAllLabelsDataTwo.push(5519); 
        programOverviewAllLabelsData.push(5989);
        programOverviewAllLabelsData4.push(10);
        programOverviewAllLabelsData5.push(6);
        programOverviewAllLabelsData6.push(208);
        programOverviewAllLabelsData3.push(5731);
        programOverviewAllLabelsDataTwo.push(4439); 
        programOverviewAllLabelsData.push(4409);
        programOverviewAllLabelsData4.push(7);
        programOverviewAllLabelsData5.push(2);
        programOverviewAllLabelsData6.push(186);
        programOverviewAllLabelsData3.push(4669);
        programOverviewAllLabelsDataTwo.push(4418); 
        programOverviewAllLabelsData.push(4651);
        programOverviewAllLabelsData4.push(9);
        programOverviewAllLabelsData5.push(null);
        programOverviewAllLabelsData6.push(184);
        programOverviewAllLabelsData3.push(5124);
        programOverviewAllLabelsDataTwo.push(2173); 
        programOverviewAllLabelsData.push(5190);
        programOverviewAllLabelsData4.push(13);
        programOverviewAllLabelsData5.push(4);
        programOverviewAllLabelsData6.push(176);
        programOverviewAllLabelsData3.push(4367);
        programOverviewAllLabelsDataTwo.push(2095); 
        programOverviewAllLabelsData.push(5844);
        programOverviewAllLabelsData4.push(15);
        programOverviewAllLabelsData5.push(6);
        programOverviewAllLabelsData6.push(171);
        programOverviewAllLabelsData3.push(4977);
        programOverviewAllLabelsDataTwo.push(1724); 
        programOverviewAllLabelsData.push(5285);
        programOverviewAllLabelsData4.push(17);
        programOverviewAllLabelsData5.push(9);
        programOverviewAllLabelsData6.push(170);
        programOverviewAllLabelsData3.push(3883);
        programOverviewAllLabelsDataTwo.push(1463); 
        programOverviewAllLabelsData.push(4706);
        programOverviewAllLabelsData4.push(9);
        programOverviewAllLabelsData5.push(5);
        programOverviewAllLabelsData6.push(137);
        programOverviewAllLabelsData3.push(4134);
        programOverviewAllLabelsDataTwo.push(1679); 
        programOverviewAllLabelsData.push(5504);
        programOverviewAllLabelsData4.push(13);
        programOverviewAllLabelsData5.push(7);
        programOverviewAllLabelsData6.push(186);
        programOverviewAllLabelsData3.push(4791);
        programOverviewAllLabelsDataTwo.push(1745); 
        programOverviewAllLabelsData.push(6089);
        programOverviewAllLabelsData4.push(22);
        programOverviewAllLabelsData5.push(9);
        programOverviewAllLabelsData6.push(196);
        programOverviewAllLabelsData3.push(5645);
        programOverviewAllLabelsDataTwo.push(2166); 
        programOverviewAllLabelsData.push(7325);
        programOverviewAllLabelsData4.push(27);
        programOverviewAllLabelsData5.push(11);
        programOverviewAllLabelsData6.push(308);
        programOverviewAllLabelsData3.push(5260);
        programOverviewAllLabelsDataTwo.push(2383); 
        programOverviewAllLabelsData.push(6703);
        programOverviewAllLabelsData4.push(49);
        programOverviewAllLabelsData5.push(16);
        programOverviewAllLabelsData6.push(231);
        programOverviewAllLabelsData3.push(5668);
        programOverviewAllLabelsDataTwo.push(4513); 
        programOverviewAllLabelsData.push(8013);
        programOverviewAllLabelsData4.push(63);
        programOverviewAllLabelsData5.push(22);
        programOverviewAllLabelsData6.push(289);
        programOverviewAllLabelsData3.push(7572);
        programOverviewAllLabelsDataTwo.push(5835); 
        programOverviewAllLabelsData.push(8573);
        programOverviewAllLabelsData4.push(122);
        programOverviewAllLabelsData5.push(22);
        programOverviewAllLabelsData6.push(507);
        programOverviewAllLabelsData3.push(9191);
        programOverviewAllLabelsDataTwo.push(6318); 
        programOverviewAllLabelsData.push(9489);
        programOverviewAllLabelsData4.push(201);
        programOverviewAllLabelsData5.push(29);
        programOverviewAllLabelsData6.push(578);
        programOverviewAllLabelsData3.push(8297);
        programOverviewAllLabelsDataTwo.push(5918); 
        programOverviewAllLabelsData.push(7071);
        programOverviewAllLabelsData4.push(310);
        programOverviewAllLabelsData5.push(47);
        programOverviewAllLabelsData6.push(528);
        programOverviewAllLabelsData3.push(8736);
        programOverviewAllLabelsDataTwo.push(7422); 
        programOverviewAllLabelsData.push(7880);
        programOverviewAllLabelsData4.push(930);
        programOverviewAllLabelsData5.push(79);
        programOverviewAllLabelsData6.push(657);
        programOverviewAllLabelsData3.push(9652);
        programOverviewAllLabelsDataTwo.push(8646); 
        programOverviewAllLabelsData.push(3950);
        programOverviewAllLabelsData4.push(5117);
        programOverviewAllLabelsData5.push(294);
        programOverviewAllLabelsData6.push(1031);
        programOverviewAllLabelsData3.push(9759);
        programOverviewAllLabelsDataTwo.push(10769); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(8453);
        programOverviewAllLabelsData5.push(1186);
        programOverviewAllLabelsData6.push(1597);
        programOverviewAllLabelsData3.push(10630);
        programOverviewAllLabelsDataTwo.push(9726); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(4945);
        programOverviewAllLabelsData5.push(2455);
        programOverviewAllLabelsData6.push(1831);
        programOverviewAllLabelsData3.push(7618);
        programOverviewAllLabelsDataTwo.push(10333); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(2754);
        programOverviewAllLabelsData5.push(3129);
        programOverviewAllLabelsData6.push(1473);
        programOverviewAllLabelsData3.push(9850);
        programOverviewAllLabelsDataTwo.push(9351); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(2421);
        programOverviewAllLabelsData5.push(3332);
        programOverviewAllLabelsData6.push(1762);
        programOverviewAllLabelsData3.push(9119);
        programOverviewAllLabelsDataTwo.push(9183); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(1763);
        programOverviewAllLabelsData5.push(2667);
        programOverviewAllLabelsData6.push(1555);
        programOverviewAllLabelsData3.push(9223);
        programOverviewAllLabelsDataTwo.push(9276); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(1119);
        programOverviewAllLabelsData5.push(1860);
        programOverviewAllLabelsData6.push(1523);
        programOverviewAllLabelsData3.push(8320);
        programOverviewAllLabelsDataTwo.push(7976); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(429);
        programOverviewAllLabelsData5.push(1370);
        programOverviewAllLabelsData6.push(904);
        programOverviewAllLabelsData3.push(7228);
        programOverviewAllLabelsDataTwo.push(7426); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(295);
        programOverviewAllLabelsData5.push(777);
        programOverviewAllLabelsData6.push(608);
        programOverviewAllLabelsData3.push(7028);
        programOverviewAllLabelsDataTwo.push(7339); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(214);
        programOverviewAllLabelsData5.push(586);
        programOverviewAllLabelsData6.push(533);
        programOverviewAllLabelsData3.push(6998);
        programOverviewAllLabelsDataTwo.push(8186); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(191);
        programOverviewAllLabelsData5.push(411);
        programOverviewAllLabelsData6.push(459);
        programOverviewAllLabelsData3.push(7543);
        programOverviewAllLabelsDataTwo.push(6714); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(81);
        programOverviewAllLabelsData5.push(249);
        programOverviewAllLabelsData6.push(295);
        programOverviewAllLabelsData3.push(5557);
        programOverviewAllLabelsDataTwo.push(5781); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(44);
        programOverviewAllLabelsData5.push(155);
        programOverviewAllLabelsData6.push(175);
        programOverviewAllLabelsData3.push(5697);
        programOverviewAllLabelsDataTwo.push(6555); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(40);
        programOverviewAllLabelsData5.push(126);
        programOverviewAllLabelsData6.push(177);
        programOverviewAllLabelsData3.push(6211);
        programOverviewAllLabelsDataTwo.push(7026); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(31);
        programOverviewAllLabelsData5.push(102);
        programOverviewAllLabelsData6.push(136);
        programOverviewAllLabelsData3.push(6830);
        programOverviewAllLabelsDataTwo.push(6304); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(23);
        programOverviewAllLabelsData5.push(80);
        programOverviewAllLabelsData6.push(120);
        programOverviewAllLabelsData3.push(5535);
        programOverviewAllLabelsDataTwo.push(5558); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(15);
        programOverviewAllLabelsData5.push(52);
        programOverviewAllLabelsData6.push(51);
        programOverviewAllLabelsData3.push(5258);
        programOverviewAllLabelsDataTwo.push(5303); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(8);
        programOverviewAllLabelsData5.push(40);
        programOverviewAllLabelsData6.push(55);
        programOverviewAllLabelsData3.push(5233);
        programOverviewAllLabelsDataTwo.push(5367); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(7);
        programOverviewAllLabelsData5.push(26);
        programOverviewAllLabelsData6.push(58);
        programOverviewAllLabelsData3.push(5589);
        programOverviewAllLabelsDataTwo.push(5983); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(5);
        programOverviewAllLabelsData5.push(18);
        programOverviewAllLabelsData6.push(56);
        programOverviewAllLabelsData3.push(5716);
        programOverviewAllLabelsDataTwo.push(5423); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(2);
        programOverviewAllLabelsData5.push(18);
        programOverviewAllLabelsData6.push(41);
        programOverviewAllLabelsData3.push(5265);
        programOverviewAllLabelsDataTwo.push(5129); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(1);
        programOverviewAllLabelsData5.push(15);
        programOverviewAllLabelsData6.push(24);
        programOverviewAllLabelsData3.push(5260);
        programOverviewAllLabelsDataTwo.push(6386); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(4);
        programOverviewAllLabelsData5.push(18);
        programOverviewAllLabelsData6.push(25);
        programOverviewAllLabelsData3.push(5335);
        programOverviewAllLabelsDataTwo.push(4346); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(2);
        programOverviewAllLabelsData5.push(10);
        programOverviewAllLabelsData6.push(12);
        programOverviewAllLabelsData3.push(5008);
        programOverviewAllLabelsDataTwo.push(6129); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(2);
        programOverviewAllLabelsData5.push(8);
        programOverviewAllLabelsData6.push(30);
        programOverviewAllLabelsData3.push(5867);
        programOverviewAllLabelsDataTwo.push(5663); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(null);
        programOverviewAllLabelsData5.push(6);
        programOverviewAllLabelsData6.push(15);
        programOverviewAllLabelsData3.push(6099);
        programOverviewAllLabelsDataTwo.push(6321); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(1);
        programOverviewAllLabelsData5.push(4);
        programOverviewAllLabelsData6.push(15);
        programOverviewAllLabelsData3.push(6517);
        programOverviewAllLabelsDataTwo.push(3167); 
        programOverviewAllLabelsData.push(null);
        programOverviewAllLabelsData4.push(1);
        programOverviewAllLabelsData5.push(1);
        programOverviewAllLabelsData6.push(7);
        programOverviewAllLabelsData3.push(3331);

如果还有什么需要帮助我的,请尽管问。

谢谢,

狼影

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。