条形图覆盖整个图表

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

我正在尝试创建一个 Chart.js，将主 

dataset
显示为条形图。 
YellowBar
和 
RedBar
数据集将覆盖在主 
dataset
之上，但这些数据集需要跨越条形图的整个宽度，如下面示例中的黄色和红色条所示。请注意，我在照片编辑程序中添加了黄色和红色条 - 它们目前不是由 Chart.js 生成的。

如图所示，可以从下拉菜单中选择 

YellowBar
和 
RedBar
的选项。它们的值应根据选择动态更新。

我应该注意，

dataset
的列数将根据下拉菜单中选择的列数而变化。

我的代码如下。这会生成主 

dataset
条形图。我使用 ChatGPT 的帮助为 
YellowBar
和 
RedBar
添加图表数据的努力只会让事情变得混乱，所以我省略了它们。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bar Chart with Dataset Selection</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
  <div>
    <canvas id="myChart" width="3" height="2"></canvas>
    <label for="datasetSelect">Select Map:</label>
    <select id="datasetSelect">
      <option value="dataset1">Map #1</option>
      <option value="dataset2">Map #2</option>
    </select>
  </div>
  <div>
    <label for="YellowBar">Select Option #1:</label>
    <select id="YellowBar">
      <option value="YB1">Thing #1</option>
      <option value="YB2">Thing #2</option>
    </select>
  </div>
  <div>
    <label for="RedBar">Select Option #2:</label>
    <select id="RedBar">
      <option value="RB1">Thing #3</option>
      <option value="RB2">Thing #4</option>
    </select>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var ctx = document.getElementById('myChart').getContext('2d');
      var datasets = {
        dataset1: {
          labels: ['Item A',
             'Item B',
             'Item C',
             'Item D'],
          data: [[612,1836],
             [612,1836],
             [1165,3029],
             [1576,3636]]
        },
        dataset2: {
          labels: ['Item X',
             'Item Y',
             'Item Z'],
          data: [[612,1836],
             [700,2100],
             [945,2458]]
        },
      };

      var YellowBar = {
        YB1: {
          data: [[800,1400]]},
        YB2: {
          data: [[1000,1600]]},
      };

        var RedBar = {
        RB1: {
          data: [[2300,2800]]},
        RB2: {
          data: [[2500,3000]]},
      };

      var chart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: datasets.dataset1.labels,
          datasets: [{
            label: 'Dataset 1',
            data: datasets.dataset1.data,
            backgroundColor: 'rgba(29, 20, 124, 0.8)',
            borderColor: 'rgba(29, 20, 124, 0.8)',
            borderWidth: 1
          }]
        },
        options: {
          plugins: {
            legend: {
              display: false
            }
          },
          scales: {
            x: {
              title: {
                display: true,
                text: 'X-axis Label'
              },
              ticks: {
                autoSkip: false,
                maxRotation: 90,
                minRotation: 90
              }
            },
            y: {
              title: {
                display: true,
                text: 'Y-axis Label'
              },
              ticks: {
                beginAtZero: true
              }
            }
          }
        }
      });

      document.getElementById('datasetSelect').addEventListener('change', function() {
        var selectedDataset = this.value;
        chart.data.labels = datasets[selectedDataset].labels;
        chart.data.datasets[0].label = selectedDataset;
        chart.data.datasets[0].data = datasets[selectedDataset].data;
        chart.update();
      });
    });
  </script>
</body>
</html>
chart.js
1个回答
0
投票

我建议查看插件 chartjs-plugin-annotation，特别是盒子类型。非常简单的插件，可以在您的图表上注册，然后指定您希望它位于的位置：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bar Chart with Dataset Selection</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js"></script>
</head>
<body>
  <div>
    <canvas id="myChart" width="3" height="2"></canvas>
    <label for="datasetSelect">Select Map:</label>
    <select id="datasetSelect">
      <option value="dataset1">Map #1</option>
      <option value="dataset2">Map #2</option>
    </select>
  </div>
  <div>
    <label for="YellowBar">Select Option #1:</label>
    <select id="YellowBar">
      <option value="YB1">Thing #1</option>
      <option value="YB2">Thing #2</option>
    </select>
  </div>
  <div>
    <label for="RedBar">Select Option #2:</label>
    <select id="RedBar">
      <option value="RB1">Thing #3</option>
      <option value="RB2">Thing #4</option>
    </select>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var ctx = document.getElementById('myChart').getContext('2d');
      var datasets = {
        dataset1: {
          labels: ['Item A',
             'Item B',
             'Item C',
             'Item D'],
          data: [[612,1836],
             [612,1836],
             [1165,3029],
             [1576,3636]]
        },
        dataset2: {
          labels: ['Item X',
             'Item Y',
             'Item Z'],
          data: [[612,1836],
             [700,2100],
             [945,2458]]
        },
      };

      var YellowBar = {
        YB1: {
          data: [[800,1400]]},
        YB2: {
          data: [[1000,1600]]},
      };

        var RedBar = {
        RB1: {
          data: [[2300,2800]]},
        RB2: {
          data: [[2500,3000]]},
      };

      var chart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: datasets.dataset1.labels,
          datasets: [{
            label: 'Dataset 1',
            data: datasets.dataset1.data,
            backgroundColor: 'rgba(29, 20, 124, 0.8)',
            borderColor: 'rgba(29, 20, 124, 0.8)',
            borderWidth: 1
          }]
        },
        options: {
          plugins: {
            legend: {
              display: false
            },
            annotation: {
             annotations: {
                box1: {
            // Indicates the type of annotation
               type: 'box',
            xMin: -0.5,
            xMax: datasets.dataset1.labels.length,
            yMin: 500,
            yMax: 1500,
            backgroundColor: 'rgba(255, 99, 132, 1)'
                }
               }
             },
             },
          scales: {
            x: {
              title: {
                display: true,
                text: 'X-axis Label'
              },
              ticks: {
                autoSkip: false,
                maxRotation: 90,
                minRotation: 90
              }
            },
            y: {
              title: {
                display: true,
                text: 'Y-axis Label'
              },
              ticks: {
                beginAtZero: true
              }
            }
          }
        }
      });

      document.getElementById('datasetSelect').addEventListener('change', function() {
        var selectedDataset = this.value;
        chart.data.labels = datasets[selectedDataset].labels;
        chart.data.datasets[0].label = selectedDataset;
        chart.data.datasets[0].data = datasets[selectedDataset].data;
        chart.update();
      });
    });
  </script>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.