如何在React Native中实现带输入文本的PieChart

下面基于Chart.js实现可通过输入文本修改数据的饼图效果，代码可直接运行：

1. HTML结构 #

<div class="chart-container">
  <h3>可编辑数据饼图</h3>
  <!-- 饼图容器 -->
  <canvas id="pieChart"></canvas>
  <!-- 数据输入区域 -->
  <div class="input-group">
    <div class="input-item">
      <label>项目A:</label>
      <input type="number" class="data-input" data-index="0" value="30" min="0">
    </div>
    <div class="input-item">
      <label>项目B:</label>
      <input type="number" class="data-input" data-index="1" value="50" min="0">
    </div>
    <div class="input-item">
      <label>项目C:</label>
      <input type="number" class="data-input" data-index="2" value="20" min="0">
    </div>
  </div>
</div>

2. CSS样式 #

.chart-container {
  width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

#pieChart {
  height: 300px !important;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-item label {
  width: 60px;
}

.data-input {
  flex: 1;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

3. JavaScript逻辑 #

// 初始化饼图数据
const chartData = {
  labels: ['项目A', '项目B', '项目C'],
  datasets: [{
    label: '数据占比',
    data: [30, 50, 20],
    backgroundColor: [
      '#FF6384',
      '#36A2EB',
      '#FFCE56'
    ],
    hoverOffset: 4
  }]
};

// 初始化饼图
const ctx = document.getElementById('pieChart').getContext('2d');
const pieChart = new Chart(ctx, {
  type: 'pie',
  data: chartData,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            const total = context.dataset.data.reduce((a, b) => a + b, 0);
            const percentage = ((context.parsed / total) * 100).toFixed(1) + '%';
            return `${context.label}: ${context.parsed} (${percentage})`;
          }
        }
      }
    }
  }
});

// 监听输入框变化，实时更新饼图
document.querySelectorAll('.data-input').forEach(input => {
  input.addEventListener('input', function() {
    const index = parseInt(this.dataset.index);
    const value = parseInt(this.value) || 0;
    pieChart.data.datasets[0].data[index] = value;
    pieChart.update();
  });
});

使用说明 #

1. 先引入Chart.js库，在HTML头部添加：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. 将上述HTML、CSS、JS代码整合到页面中，即可实现输入框修改数据、饼图实时更新的效果。
3. 若需添加更多数据项，只需在HTML中增加对应输入框，同时修改chartData里的labels和data数组，补充对应背景色即可。

内容的提问来源于stack exchange，提问作者Samara