如何解决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 举报,一经查实,本站将立刻删除。