https://www.mayuer.com https://www.mayuer.com https://www.mayuer.com/image/social.png ja-JP Fri, 21 Nov 2025 09:15:00 +0900 https://www.mayuer.com/pickup/20251015/24261 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 15 Oct 2025 12:12:00 +0900 https://www.mayuer.com/pickup/20251015/24261 https://www.mayuer.com/pickup/20251010/24260 PADDING.left + (chartWidth / (weeks.length - 1)) * index;             const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1);                          // 週タイトルと順位ガイドを描画             const defs = document.createElementNS(svgNS, 'defs');             const style = document.createElementNS(svgNS, 'style');             style.textContent = `                 .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; }                 .week-title { font-size: 13px; font-weight: bold; }                 .rank-guide { stroke: #eee; }             `;             defs.appendChild(style);             svg.appendChild(defs);             weeks.forEach((week, i) => {                 const x = getX(i);                 const title = document.createElementNS(svgNS, 'text');                 title.setAttribute('x', x);                 title.setAttribute('y', 20);                 title.setAttribute('text-anchor', 'middle');                 title.setAttribute('class', 'week-title');                 title.textContent = week;                 svg.appendChild(title);             });             for(let i=1; i {                 const color = colors[i % colors.length];                 const points = [];                 anime.ranks.forEach((rank, weekIndex) => {                     if (rank !== null) {                         points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex });                     }                 });                 if (points.length === 0) return;                 // 線を描画                 for (let j = 0; j < points.length - 1; j++) {                     if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か                          const line = document.createElementNS(svgNS, 'path');                          line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`);                          line.setAttribute('class', 'line');                          line.setAttribute('style', `stroke: ${color};`);                          svg.appendChild(line);                     }                 }                 // 点とラベルを描画                 points.forEach((p, k) => {                     const dot = document.createElementNS(svgNS, 'circle');                     dot.setAttribute('cx', p.x);                     dot.setAttribute('cy', p.y);                     dot.setAttribute('r', 5);                     dot.setAttribute('class', 'dot');                     dot.setAttribute('style', `fill:${color};`);                     svg.appendChild(dot);                                          // 最初と最後の点にだけラベルを表示                     if (k === 0) {                         const label = document.createElementNS(svgNS, 'text');                         label.setAttribute('x', p.x - 10);                         label.setAttribute('y', p.y);                         label.setAttribute('dy', '.3em');                         label.setAttribute('text-anchor', 'end');                         label.setAttribute('class', 'label-text');                         label.textContent = anime.name;                         svg.appendChild(label);                     }                     if (k === points.length - 1 && points.length > 1) {                          const label = document.createElementNS(svgNS, 'text');                         label.setAttribute('x', p.x + 10);                         label.setAttribute('y', p.y);                         label.setAttribute('dy', '.3em');                         label.setAttribute('text-anchor', 'start');                         label.setAttribute('class', 'label-text');                         label.textContent = anime.name;                         svg.appendChild(label);                     }                 });             });         })();     -----]]> Fri, 10 Oct 2025 11:00:00 +0900 https://www.mayuer.com/pickup/20251010/24260 https://www.mayuer.com/pickup/20251009/24259 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 09 Oct 2025 11:10:00 +0900 https://www.mayuer.com/pickup/20251009/24259 https://www.mayuer.com/pickup/20251008/24258 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 08 Oct 2025 16:18:00 +0900 https://www.mayuer.com/pickup/20251008/24258 https://www.mayuer.com/pickup/20251007/24257 PADDING.left + (chartWidth / (weeks.length - 1)) * index;             const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1);                          // 週タイトルと順位ガイドを描画             const defs = document.createElementNS(svgNS, 'defs');             const style = document.createElementNS(svgNS, 'style');             style.textContent = `                 .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; }                 .week-title { font-size: 13px; font-weight: bold; }                 .rank-guide { stroke: #eee; }             `;             defs.appendChild(style);             svg.appendChild(defs);             weeks.forEach((week, i) => {                 const x = getX(i);                 const title = document.createElementNS(svgNS, 'text');                 title.setAttribute('x', x);                 title.setAttribute('y', 20);                 title.setAttribute('text-anchor', 'middle');                 title.setAttribute('class', 'week-title');                 title.textContent = week;                 svg.appendChild(title);             });             for(let i=1; i {                 const color = colors[i % colors.length];                 const points = [];                 anime.ranks.forEach((rank, weekIndex) => {                     if (rank !== null) {                         points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex });                     }                 });                 if (points.length === 0) return;                 // 線を描画                 for (let j = 0; j < points.length - 1; j++) {                     if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か                          const line = document.createElementNS(svgNS, 'path');                          line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`);                          line.setAttribute('class', 'line');                          line.setAttribute('style', `stroke: ${color};`);                          svg.appendChild(line);                     }                 }                 // 点とラベルを描画                 points.forEach((p, k) => {                     const dot = document.createElementNS(svgNS, 'circle');                     dot.setAttribute('cx', p.x);                     dot.setAttribute('cy', p.y);                     dot.setAttribute('r', 5);                     dot.setAttribute('class', 'dot');                     dot.setAttribute('style', `fill:${color};`);                     svg.appendChild(dot);                                          // 最初と最後の点にだけラベルを表示                     if (k === 0) {                         const label = document.createElementNS(svgNS, 'text');                         label.setAttribute('x', p.x - 10);                         label.setAttribute('y', p.y);                         label.setAttribute('dy', '.3em');                         label.setAttribute('text-anchor', 'end');                         label.setAttribute('class', 'label-text');                         label.textContent = anime.name;                         svg.appendChild(label);                     }                     if (k === points.length - 1 && points.length > 1) {                          const label = document.createElementNS(svgNS, 'text');                         label.setAttribute('x', p.x + 10);                         label.setAttribute('y', p.y);                         label.setAttribute('dy', '.3em');                         label.setAttribute('text-anchor', 'start');                         label.setAttribute('class', 'label-text');                         label.textContent = anime.name;                         svg.appendChild(label);                     }                 });             });         })();    ]]> Tue, 07 Oct 2025 12:37:00 +0900 https://www.mayuer.com/pickup/20251007/24257 https://www.mayuer.com/pickup/20251006/24256 PADDING.left + (chartWidth / (weeks.length - 1)) * index;             const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1);                          // 週タイトルと順位ガイドを描画             const defs = document.createElementNS(svgNS, 'defs');             const style = document.createElementNS(svgNS, 'style');             style.textContent = `                 .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; }                 .week-title { font-size: 13px; font-weight: bold; }                 .rank-guide { stroke: #eee; }             `;             defs.appendChild(style);             svg.appendChild(defs);             weeks.forEach((week, i) => {                 const x = getX(i);                 const title = document.createElementNS(svgNS, 'text');                 title.setAttribute('x', x);                 title.setAttribute('y', 20);                 title.setAttribute('text-anchor', 'middle');                 title.setAttribute('class', 'week-title');                 title.textContent = week;                 svg.appendChild(title);             });             for(let i=1; i {                 const color = colors[i % colors.length];                 const points = [];                 anime.ranks.forEach((rank, weekIndex) => {                     if (rank !== null) {                         points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex });                     }                 });                 if (points.length === 0) return;                 // 線を描画                 for (let j = 0; j < points.length - 1; j++) {                     if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か                          const line = document.createElementNS(svgNS, 'path');                          line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`);                          line.setAttribute('class', 'line');                          line.setAttribute('style', `stroke: ${color};`);                          svg.appendChild(line);                     }                 }                 // 点とラベルを描画                 points.forEach((p, k) => {                     const dot = document.createElementNS(svgNS, 'circle');                     dot.setAttribute('cx', p.x);                     dot.setAttribute('cy', p.y);                     dot.setAttribute('r', 5);                     dot.setAttribute('class', 'dot');                     dot.setAttribute('style', `fill:${color};`);                     svg.appendChild(dot);                                          // 最初と最後の点にだけラベルを表示                     if (k === 0) {                         const label = document.createElementNS(svgNS, 'text');                         label.setAttribute('x', p.x - 10);                         label.setAttribute('y', p.y);                         label.setAttribute('dy', '.3em');                         label.setAttribute('text-anchor', 'end');                         label.setAttribute('class', 'label-text');                         label.textContent = anime.name;                         svg.appendChild(label);                     }                     if (k === points.length - 1 && points.length > 1) {                          const label = document.createElementNS(svgNS, 'text');                         label.setAttribute('x', p.x + 10);                         label.setAttribute('y', p.y);                         label.setAttribute('dy', '.3em');                         label.setAttribute('text-anchor', 'start');                         label.setAttribute('class', 'label-text');                         label.textContent = anime.name;                         svg.appendChild(label);                     }                 });             });         })();    ]]> Mon, 06 Oct 2025 15:10:00 +0900 https://www.mayuer.com/pickup/20251006/24256 https://www.mayuer.com/pickup/20251003/24255 PADDING.left + (chartWidth / (weeks.length - 1)) * index;             const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1);                          // 週タイトルと順位ガイドを描画             const defs = document.createElementNS(svgNS, 'defs');             const style = document.createElementNS(svgNS, 'style');             style.textContent = `                 .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; }                 .week-title { font-size: 13px; font-weight: bold; }                 .rank-guide { stroke: #eee; }             `;             defs.appendChild(style);             svg.appendChild(defs);             weeks.forEach((week, i) => {                 const x = getX(i);                 const title = document.createElementNS(svgNS, 'text');                 title.setAttribute('x', x);                 title.setAttribute('y', 20);                 title.setAttribute('text-anchor', 'middle');                 title.setAttribute('class', 'week-title');                 title.textContent = week;                 svg.appendChild(title);             });             for(let i=1; i {                 const color = colors[i % colors.length];                 const points = [];                 anime.ranks.forEach((rank, weekIndex) => {                     if (rank !== null) {                         points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex });                     }                 });                 if (points.length === 0) return;                 // 線を描画                 for (let j = 0; j < points.length - 1; j++) {                     if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か                          const line = document.createElementNS(svgNS, 'path');                          line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`);                          line.setAttribute('class', 'line');                          line.setAttribute('style', `stroke: ${color};`);                          svg.appendChild(line);                     }                 }                 // 点とラベルを描画                 points.forEach((p, k) => {                     const dot = document.createElementNS(svgNS, 'circle');                     dot.setAttribute('cx', p.x);                     dot.setAttribute('cy', p.y);                     dot.setAttribute('r', 5);                     dot.setAttribute('class', 'dot');                     dot.setAttribute('style', `fill:${color};`);                     svg.appendChild(dot);                                          // 最初と最後の点にだけラベルを表示                     if (k === 0) {                         const label = document.createElementNS(svgNS, 'text');                         label.setAttribute('x', p.x - 10);                         label.setAttribute('y', p.y);                         label.setAttribute('dy', '.3em');                         label.setAttribute('text-anchor', 'end');                         label.setAttribute('class', 'label-text');                         label.textContent = anime.name;                         svg.appendChild(label);                     }                     if (k === points.length - 1 && points.length > 1) {                          const label = document.createElementNS(svgNS, 'text');                         label.setAttribute('x', p.x + 10);                         label.setAttribute('y', p.y);                         label.setAttribute('dy', '.3em');                         label.setAttribute('text-anchor', 'start');                         label.setAttribute('class', 'label-text');                         label.textContent = anime.name;                         svg.appendChild(label);                     }                 });             });         })();     -----]]> Fri, 03 Oct 2025 13:14:00 +0900 https://www.mayuer.com/pickup/20251003/24255 https://www.mayuer.com/pickup/20251002/24254 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 02 Oct 2025 17:27:00 +0900 https://www.mayuer.com/pickup/20251002/24254 https://www.mayuer.com/pickup/20251001/24253 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } .rank-text-number { font-size: 8px; fill: #fff; font-weight: bold; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); // 週タイトルのフォーマットを調整 title.textContent = week.replace('年', '/').replace('日週', '').replace('月', '/'); svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), rank: rank, weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { // 点 const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 順位テキスト (点の中) const rankText = document.createElementNS(svgNS, 'text'); rankText.setAttribute('x', p.x); rankText.setAttribute('y', p.y); rankText.setAttribute('dy', '.3em'); rankText.setAttribute('text-anchor', 'middle'); rankText.setAttribute('class', 'rank-text-number'); rankText.textContent = p.rank; svg.appendChild(rankText); // 最初と最後の点にだけラベルを表示 // 最初の週、またはその映画が最初に登場した週のラベル (左) if (k === 0 || p.weekIndex === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } // 最後の週、またはその映画が最後に登場した週のラベル (右) if (k === points.length - 1 || p.weekIndex === weeks.length - 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 01 Oct 2025 13:14:00 +0900 https://www.mayuer.com/pickup/20251001/24253 https://www.mayuer.com/pickup/20251001/24252 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 // (省略: スタイル設定はタグに移動) const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); // 週タイトルのフォーマットを調整 title.textContent = week.replace('年', '/').replace('日週', '').replace('月', '/'); svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), rank: rank, weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 順位テキスト const rankText = document.createElementNS(svgNS, 'text'); rankText.setAttribute('x', p.x); rankText.setAttribute('y', p.y); rankText.setAttribute('dy', '.3em'); rankText.setAttribute('text-anchor', 'middle'); rankText.setAttribute('class', 'rank-text'); // 既存のrank-textクラスを流用 rankText.setAttribute('style', `fill: #fff; font-weight: bold; font-size: 8px;`); rankText.textContent = p.rank; svg.appendChild(rankText); // 最初と最後の点にだけラベルを表示 if (k === 0 || p.weekIndex === 0) { // 最初の週、またはそのアニメが最初に登場した週のラベル const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 || p.weekIndex === weeks.length - 1) { // 最後の週、またはそのアニメが最後に登場した週のラベル const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 01 Oct 2025 12:34:00 +0900 https://www.mayuer.com/pickup/20251001/24252 https://www.mayuer.com/pickup/20250930/24251 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Tue, 30 Sep 2025 18:08:00 +0900 https://www.mayuer.com/pickup/20250930/24251 https://www.mayuer.com/pickup/20250926/24250 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Fri, 26 Sep 2025 12:36:00 +0900 https://www.mayuer.com/pickup/20250926/24250 https://www.mayuer.com/pickup/20250925/24249 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), rank: rank, weekIndex: weekIndex, name: anime.name }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 順位テキストを表示 (点の上または下に表示) const rankText = document.createElementNS(svgNS, 'text'); rankText.setAttribute('x', p.x); rankText.setAttribute('y', p.y + (p.rank = 1) { // 1回のみ登場の場合も表示 const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = p.name; svg.appendChild(label); } }); }); })();]]> Thu, 25 Sep 2025 13:20:00 +0900 https://www.mayuer.com/pickup/20250925/24249 https://www.mayuer.com/pickup/20250925/24248 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), rank: rank, weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 順位テキストを表示 (点の上または下に表示) const rankText = document.createElementNS(svgNS, 'text'); rankText.setAttribute('x', p.x); rankText.setAttribute('y', p.y + (p.rank = 1) { // 1回のみ登場の場合も表示 const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 25 Sep 2025 11:45:00 +0900 https://www.mayuer.com/pickup/20250925/24248 https://www.mayuer.com/pickup/20250924/24247 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 24 Sep 2025 13:21:00 +0900 https://www.mayuer.com/pickup/20250924/24247 https://www.mayuer.com/pickup/20250924/24246 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 24 Sep 2025 11:37:00 +0900 https://www.mayuer.com/pickup/20250924/24246 https://www.mayuer.com/pickup/20250919/24245 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Fri, 19 Sep 2025 10:30:00 +0900 https://www.mayuer.com/pickup/20250919/24245 https://www.mayuer.com/pickup/20250918/24244 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 18 Sep 2025 12:10:00 +0900 https://www.mayuer.com/pickup/20250918/24244 https://www.mayuer.com/pickup/20250918/24243 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 18 Sep 2025 11:14:00 +0900 https://www.mayuer.com/pickup/20250918/24243 https://www.mayuer.com/pickup/20250917/24242 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 17 Sep 2025 12:06:00 +0900 https://www.mayuer.com/pickup/20250917/24242 https://www.mayuer.com/pickup/20250916/24241 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Tue, 16 Sep 2025 19:00:00 +0900 https://www.mayuer.com/pickup/20250916/24241 https://www.mayuer.com/pickup/20250912/24240 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Fri, 12 Sep 2025 18:13:00 +0900 https://www.mayuer.com/pickup/20250912/24240 https://www.mayuer.com/pickup/20250912/24239 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Fri, 12 Sep 2025 12:45:00 +0900 https://www.mayuer.com/pickup/20250912/24239 https://www.mayuer.com/pickup/20250912/24238 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Fri, 12 Sep 2025 12:11:00 +0900 https://www.mayuer.com/pickup/20250912/24238 https://www.mayuer.com/pickup/20250911/24237 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for (let i = 1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画（連続週のみ接続） for (let j = 0; j < points.length - 1; j++) { if (points[j + 1].weekIndex - points[j].weekIndex === 1) { const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j + 1].x} ${points[j + 1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画（端点のみラベル） points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 11 Sep 2025 18:33:00 +0900 https://www.mayuer.com/pickup/20250911/24237 https://www.mayuer.com/pickup/20250911/24236 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画（連続週のみ接続） for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画（端点のみラベル） points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 11 Sep 2025 17:42:00 +0900 https://www.mayuer.com/pickup/20250911/24236 https://www.mayuer.com/pickup/20250904/24235 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 04 Sep 2025 17:35:00 +0900 https://www.mayuer.com/pickup/20250904/24235 https://www.mayuer.com/pickup/20250904/24234 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 04 Sep 2025 12:39:00 +0900 https://www.mayuer.com/pickup/20250904/24234 https://www.mayuer.com/pickup/20250903/24233 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 03 Sep 2025 17:50:00 +0900 https://www.mayuer.com/pickup/20250903/24233 https://www.mayuer.com/pickup/20250903/24232 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 03 Sep 2025 13:41:00 +0900 https://www.mayuer.com/pickup/20250903/24232 https://www.mayuer.com/pickup/20250902/24231 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Tue, 02 Sep 2025 18:33:00 +0900 https://www.mayuer.com/pickup/20250902/24231 https://www.mayuer.com/pickup/20250829/24230 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; celeb.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = celeb.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = celeb.name; svg.appendChild(label); } }); }); })();]]> Fri, 29 Aug 2025 14:26:00 +0900 https://www.mayuer.com/pickup/20250829/24230 https://www.mayuer.com/pickup/20250828/24229 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; series.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex }); } }); if (points.length === 0) return; // 連続した週のみ線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベル（最初と最後のみ） points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); if (k === 0) { const labelL = document.createElementNS(svgNS, 'text'); labelL.setAttribute('x', p.x - 10); labelL.setAttribute('y', p.y); labelL.setAttribute('dy', '.3em'); labelL.setAttribute('text-anchor', 'end'); labelL.setAttribute('class', 'label-text'); labelL.textContent = series.name; svg.appendChild(labelL); } if (k === points.length - 1 && points.length > 1) { const labelR = document.createElementNS(svgNS, 'text'); labelR.setAttribute('x', p.x + 10); labelR.setAttribute('y', p.y); labelR.setAttribute('dy', '.3em'); labelR.setAttribute('text-anchor', 'start'); labelR.setAttribute('class', 'label-text'); labelR.textContent = series.name; svg.appendChild(labelR); } }); }); })();]]> Thu, 28 Aug 2025 16:47:00 +0900 https://www.mayuer.com/pickup/20250828/24229 https://www.mayuer.com/pickup/20250828/24228 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Thu, 28 Aug 2025 14:35:00 +0900 https://www.mayuer.com/pickup/20250828/24228 https://www.mayuer.com/pickup/20250828/24227 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for (let i = 1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) points.push({ x: getX(weekIndex), y: getY(rank), weekIndex }); }); if (points.length === 0) return; // 線を描画（連続週のみ） for (let j = 0; j < points.length - 1; j++) { if (points[j + 1].weekIndex - points[j].weekIndex === 1) { const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j + 1].x} ${points[j + 1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベル points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にラベル if (k === 0) { const labelL = document.createElementNS(svgNS, 'text'); labelL.setAttribute('x', p.x - 10); labelL.setAttribute('y', p.y); labelL.setAttribute('dy', '.3em'); labelL.setAttribute('text-anchor', 'end'); labelL.setAttribute('class', 'label-text'); labelL.textContent = anime.name; svg.appendChild(labelL); } if (k === points.length - 1 && points.length > 1) { const labelR = document.createElementNS(svgNS, 'text'); labelR.setAttribute('x', p.x + 10); labelR.setAttribute('y', p.y); labelR.setAttribute('dy', '.3em'); labelR.setAttribute('text-anchor', 'start'); labelR.setAttribute('class', 'label-text'); labelR.textContent = anime.name; svg.appendChild(labelR); } }); }); })();]]> Thu, 28 Aug 2025 13:09:00 +0900 https://www.mayuer.com/pickup/20250828/24227 https://www.mayuer.com/pickup/20250826/24226 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for (let i = 1; i { const color = colors[i % colors.length]; const points = []; item.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex }); } }); if (points.length === 0) return; // 線を描画（連続週のみ結ぶ） for (let j = 0; j < points.length - 1; j++) { if (points[j + 1].weekIndex - points[j].weekIndex === 1) { const path = document.createElementNS(svgNS, 'path'); path.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j + 1].x} ${points[j + 1].y}`); path.setAttribute('class', 'line'); path.setAttribute('style', `stroke: ${color};`); svg.appendChild(path); } } // 点とラベル points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点のみラベル表示 if (k === 0) { const labelL = document.createElementNS(svgNS, 'text'); labelL.setAttribute('x', p.x - 10); labelL.setAttribute('y', p.y); labelL.setAttribute('dy', '.3em'); labelL.setAttribute('text-anchor', 'end'); labelL.setAttribute('class', 'label-text'); labelL.textContent = item.name; svg.appendChild(labelL); } if (k === points.length - 1 && points.length > 1) { const labelR = document.createElementNS(svgNS, 'text'); labelR.setAttribute('x', p.x + 10); labelR.setAttribute('y', p.y); labelR.setAttribute('dy', '.3em'); labelR.setAttribute('text-anchor', 'start'); labelR.setAttribute('class', 'label-text'); labelR.textContent = item.name; svg.appendChild(labelR); } }); }); })();]]> Tue, 26 Aug 2025 19:56:00 +0900 https://www.mayuer.com/pickup/20250826/24226 https://www.mayuer.com/pickup/20250822/24225 Fri, 22 Aug 2025 11:19:00 +0900 https://www.mayuer.com/pickup/20250822/24225 https://www.mayuer.com/pickup/20250821/24224 Thu, 21 Aug 2025 13:53:00 +0900 https://www.mayuer.com/pickup/20250821/24224 https://www.mayuer.com/pickup/20250821/24223 Thu, 21 Aug 2025 11:49:00 +0900 https://www.mayuer.com/pickup/20250821/24223 https://www.mayuer.com/pickup/20250820/24222 PADDING.left + (chartWidth / (weeks.length - 1)) * index; const getY = (rank) => PADDING.top + (chartHeight / (RANK_COUNT - 1)) * (rank - 1); // 週タイトルと順位ガイドを描画 const defs = document.createElementNS(svgNS, 'defs'); const style = document.createElementNS(svgNS, 'style'); style.textContent = ` .label-text { font-size: 11px; fill: #333; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; } .week-title { font-size: 13px; font-weight: bold; } .rank-guide { stroke: #eee; } `; defs.appendChild(style); svg.appendChild(defs); weeks.forEach((week, i) => { const x = getX(i); const title = document.createElementNS(svgNS, 'text'); title.setAttribute('x', x); title.setAttribute('y', 20); title.setAttribute('text-anchor', 'middle'); title.setAttribute('class', 'week-title'); title.textContent = week; svg.appendChild(title); }); for(let i=1; i { const color = colors[i % colors.length]; const points = []; anime.ranks.forEach((rank, weekIndex) => { if (rank !== null) { points.push({ x: getX(weekIndex), y: getY(rank), weekIndex: weekIndex }); } }); if (points.length === 0) return; // 線を描画 for (let j = 0; j < points.length - 1; j++) { if (points[j+1].weekIndex - points[j].weekIndex === 1) { //連続した週か const line = document.createElementNS(svgNS, 'path'); line.setAttribute('d', `M ${points[j].x} ${points[j].y} L ${points[j+1].x} ${points[j+1].y}`); line.setAttribute('class', 'line'); line.setAttribute('style', `stroke: ${color};`); svg.appendChild(line); } } // 点とラベルを描画 points.forEach((p, k) => { const dot = document.createElementNS(svgNS, 'circle'); dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y); dot.setAttribute('r', 5); dot.setAttribute('class', 'dot'); dot.setAttribute('style', `fill:${color};`); svg.appendChild(dot); // 最初と最後の点にだけラベルを表示 if (k === 0) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x - 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'end'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } if (k === points.length - 1 && points.length > 1) { const label = document.createElementNS(svgNS, 'text'); label.setAttribute('x', p.x + 10); label.setAttribute('y', p.y); label.setAttribute('dy', '.3em'); label.setAttribute('text-anchor', 'start'); label.setAttribute('class', 'label-text'); label.textContent = anime.name; svg.appendChild(label); } }); }); })();]]> Wed, 20 Aug 2025 17:55:00 +0900 https://www.mayuer.com/pickup/20250820/24222 https://www.mayuer.com/pickup/20250820/24221 Wed, 20 Aug 2025 12:03:00 +0900 https://www.mayuer.com/pickup/20250820/24221 https://www.mayuer.com/pickup/20250815/24220 Fri, 15 Aug 2025 13:03:00 +0900 https://www.mayuer.com/pickup/20250815/24220 https://www.mayuer.com/pickup/20250815/24219 Fri, 15 Aug 2025 11:45:00 +0900 https://www.mayuer.com/pickup/20250815/24219 https://www.mayuer.com/pickup/20250814/24218 Thu, 14 Aug 2025 11:08:00 +0900 https://www.mayuer.com/pickup/20250814/24218 https://www.mayuer.com/pickup/20250813/24217 Wed, 13 Aug 2025 11:36:00 +0900 https://www.mayuer.com/pickup/20250813/24217 https://www.mayuer.com/pickup/20250812/24216 Tue, 12 Aug 2025 16:47:00 +0900 https://www.mayuer.com/pickup/20250812/24216 https://www.mayuer.com/pickup/20250807/24215 Thu, 07 Aug 2025 15:46:00 +0900 https://www.mayuer.com/pickup/20250807/24215 https://www.mayuer.com/pickup/20250807/24214 Thu, 07 Aug 2025 12:42:00 +0900 https://www.mayuer.com/pickup/20250807/24214 https://www.mayuer.com/pickup/20250806/24213 Wed, 06 Aug 2025 13:12:00 +0900 https://www.mayuer.com/pickup/20250806/24213 https://www.mayuer.com/pickup/20250805/24212 Tue, 05 Aug 2025 13:46:00 +0900 https://www.mayuer.com/pickup/20250805/24212