在 Powershell 和 PSWriteHTML 中：单击表格行并仅显示一个图表

问题描述 投票：0回答：1

你好，抱歉我的英语不好。 我有这段代码，显示表中的 3 个对象以及图表线中的每个对象。

$DT_P_i = 0
$DataTable = @()   
for(($l_i=0); ($l_i -lt 10); ($l_i++))
{
   $DataTable += @(
      [PSCustomObject] @{
         Names = "My Name " + $l_i.ToString()
         Procc = @()
      }
   )

   for (($l_j = 0); ($l_j -lt 2); ($l_j++))
   {
      $DT_P_I++
      
      $DataTable[$l_i].Procc += @(
         [PSCustomObject]@{
            PNames = "Procc " + $DT_P_I.ToString()
            Times = @()
            Values = @()
         }
      )

      for (($l_v = 0); ($l_v -lt 3); ($l_v++))
      {
         $DataTable[$l_i].Procc[$l_j].Times += $l_v.ToString()
         $DataTable[$l_i].Procc[$l_j].Values += $l_v.ToString()
      }
   }
}

$DT_Unique = $DataTable.Names | Get-Unique -AsString
   
$Table_N_PN = @()

foreach ($DT in $DataTable)
{
   foreach ($DTP in $DT.Procc)
   {
      $Table_N_PN += @(
         [PSCustomObject]@{
            Name=$DT.Names
            PName =$DTP.PNames
         }
      )
   }
}


$TableProcesses = "TableProcesses"

New-HTML -TitleText 'Names - Processes - Charts' -Online -FilePath $PSScriptRoot\Test.html {
   New-HTMLSection -HeaderText "TABLE: Names and Processes" -HeaderTextSize 25{
      New-HTMLTable -DataTable $DT_Unique -PreContent{"<h1>Names</h1>"}{
         New-TableEvent -TableID $TableProcesses -SourceColumnID 0 -TargetColumnID 0
      }
      New-HTMLTable -DataTable $Table_N_PN -DataTableID $TableProcesses -PreContent{"<h1>Processes</h1>"}
   }

   New-HTMLSection -HeaderText "Charts" -HeaderTextSize 25{
      New-HTMLPanel{ 

         $BGcolors = [enum]::GetValues([System.ConsoleColor]) 
         [bool]$l_show_yellow = $false

         foreach ($Object in $DataTable) {

            if ($l_show_yellow -eq $true) {$l_show_yellow = $false; $Color = $BGcolors[1]; } else {$l_show_yellow = $true; $Color = $BGcolors[14]; }
            $str = "Chart for : " + $Object.Names
            New-HTMLSection -HeaderText $str -HeaderTextSize 20  -BackgroundColor $Color{ 
               New-HTMLPanel{   
                  foreach ($Pr in $Object.Procc) {
                     $str = $Pr.PNames
                     New-HTMLSection -HeaderText $str  -HeaderTextSize 14{ 
                        New-HTMLPanel -BackgroundColor White{   
                           New-HTMLChart {
                              New-ChartAxisX -Names $Pr.Times
                              New-ChartLine -Name $Pr.PNames -Value $Pr.Values
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }
} -ShowHTML

我想单击表格的一行（例如我的对象 1）并仅显示对象 1 的图表

你能帮我吗？ 谢谢大家

尝试单击行表并显示该对象的图表

此代码在顶部部分显示我拥有的所有对象，在底部部分显示图表中所有对象的所有值。我的脚本上有 30 个对象，并且我看到了所有对象的所有图表。

我想要的是单击表格上的一个对象，然后仅查看该对象的图表。例如：如果我单击具有“我的对象 1”的第一行，我只想查看“我的对象 1”的图表，而不是其他图表。

我不知道如何在单击表中包含对象的行时仅显示选定的对象图表，或隐藏其他对象图表。

我更改了代码...因为我现在有它

powershell
1个回答
0
投票

我找到了方法：怎么做...如果有人想使用它，我写代码...

$DT_P_i = 0
$DataTable = @()   
for(($l_i=0); ($l_i -lt 10); ($l_i++))
{
   $DataTable += @(
      [PSCustomObject] @{
         Names = "My Name " + $l_i.ToString()
         Procc = @()
      }
   )

   for (($l_j = 0); ($l_j -lt 2); ($l_j++))
   {
      $DT_P_I++
      
      $DataTable[$l_i].Procc += @(
         [PSCustomObject]@{
            PNames = "Procc " + $DT_P_I.ToString()
            Times = @()
            Values = @()
         }
      )

      for (($l_v = 0); ($l_v -lt 3); ($l_v++))
      {
         $DataTable[$l_i].Procc[$l_j].Times += $l_v.ToString()
         $DataTable[$l_i].Procc[$l_j].Values += $l_v.ToString()
      }
   }
}

$DT_Unique = $DataTable.Names | Get-Unique -AsString
   
$Table_N_PN = @()

foreach ($DT in $DataTable)
{
   foreach ($DTP in $DT.Procc)
   {
      $Table_N_PN += @(
         [PSCustomObject]@{
            Name=$DT.Names
            PName =$DTP.PNames
         }
      )
   }
}


$TableProcesses = "TableProcesses"

New-HTML -TitleText 'Names - Processes - Charts' -Online -FilePath $PSScriptRoot\Test.html {
   New-HTMLSection -HeaderText "TABLE: Names and Processes" -HeaderTextSize 25{
      <#New-HTMLTable -DataTable $DT_Unique -PreContent{"<h1>Names</h1>"}{
         New-TableEvent -TableID $TableProcesses -SourceColumnID 0 -TargetColumnID 0
      }
      #>
      # Πίνακας Names
      New-HTMLTable -DataTable $DT_Unique -PreContent{"<h1>Names</h1>"} -DataTableID "NamesTable"{
         New-TableEvent -TableID $TableProcesses -SourceColumnID 0 -TargetColumnID 0
      }

      New-HTMLTable -DataTable $Table_N_PN -DataTableID $TableProcesses -PreContent{"<h1>Processes</h1>"}
   }

   New-HTMLSection -HeaderText "Charts" -HeaderTextSize 25{
      New-HTMLPanel{ 

         $BGcolors = [enum]::GetValues([System.ConsoleColor]) 
         [bool]$l_show_yellow = $false
         <#
         foreach ($Object in $DataTable) {

            if ($l_show_yellow -eq $true) {$l_show_yellow = $false; $Color = $BGcolors[1]; } else {$l_show_yellow = $true; $Color = $BGcolors[14]; }
            $str = "Chart for : " + $Object.Names
            New-HTMLSection -HeaderText $str -HeaderTextSize 20  -BackgroundColor $Color { 
               New-HTMLPanel{   
                  foreach ($Pr in $Object.Procc) {
                     $str = $Pr.PNames
                     New-HTMLSection -HeaderText $str  -HeaderTextSize 14{ 
                        New-HTMLPanel -BackgroundColor White{   
                           New-HTMLChart {
                              New-ChartAxisX -Names $Pr.Times
                              New-ChartLine -Name $Pr.PNames -Value $Pr.Values
                           }
                        }
                     }
                  }
               }
            }
         }
         #>
         foreach ($Object in $DataTable) {

            if ($l_show_yellow -eq $true) {$l_show_yellow = $false; $Color = $BGcolors[1]; } else {$l_show_yellow = $true; $Color = $BGcolors[14]; }
            $str = "Chart for : " + $Object.Names

            # Manually adding data-name
            "<div data-name='$($Object.Names)'>"
            # Log to see the data-name
            "<script>console.log('Data-name: $($Object.Names)');</script>" 

            # Use panels for each chart
            New-HTMLSection -HeaderText $str -HeaderTextSize 20 -BackgroundColor $Color {
               New-HTMLPanel {
                  
                  foreach ($Pr in $Object.Procc) {
                     $str = $Pr.PNames
                     New-HTMLSection -HeaderText $str -HeaderTextSize 14 {
                        New-HTMLPanel -BackgroundColor White {
                           New-HTMLChart {
                              New-ChartAxisX -Names $Pr.Times
                              New-ChartLine -Name $Pr.PNames -Value $Pr.Values
                           }
                        }
                     }
                  }
                  "</div>"  # Closing the div
               }
            }
         }
      }
   }
   # Adding JavaScript with New-HTMLPanel
   New-HTMLPanel {
      "<script>
      document.addEventListener('DOMContentLoaded', function() {
          var rows = document.querySelectorAll('table tr');
          rows.forEach(function(row) {
              row.addEventListener('click', function() {
                  var selectedName = this.cells[0].textContent.trim(); // Get the first column

                  // Selecting the chart based on data-name
                  var chartToShow = document.querySelector('div[data-name=`"' + selectedName + '`"]');

                  if (chartToShow) {
                      var allCharts = document.querySelectorAll('div[data-name]');
                      allCharts.forEach(function(chart) {
                          chart.style.display = 'none'; // Hiding all charts
                      });
                      chartToShow.style.display = 'block'; // Displaying only the selected chart
                  } else {
                      console.error('Chart not found: ' + selectedName);
                  }
              });
          });
      });
      </script>"
  }
} -ShowHTML
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.