---
title: Amazon Review Analysis Chart.js Template
purpose: 交互式HTML报告模板，配色#0f3460+#e94560，7种图表类型
---

# Chart.js HTML Report Template

## CDN引用
```html
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
```

## 配色方案
- 主色(深蓝): `#0f3460`
- 强调色(红): `#e94560`
- 好评绿: `#38a169` / `#48bb78` / `#68d391`
- 差评红: `#e53e3e` / `#fc8181`
- 中性黄: `#f6e05e`
- 功能蓝: `#3182ce` / `#4299e1` / `#63b3ed`

## 7种图表类型

### 1. 评分分布对比 (Grouped Bar)
```javascript
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['5 Star','4 Star','3 Star','2 Star','1 Star'],
    datasets: [
      {label: 'Product A', data: [76,12,3,4,5], backgroundColor: 'rgba(15,52,96,0.8)'},
      {label: 'Product B', data: [61,14,10,5,10], backgroundColor: 'rgba(233,69,96,0.8)'}
    ]
  },
  options: {scales:{y:{beginAtZero:true,title:{display:true,text:'百分比 (%)'}}}}
});
```

### 2. 好评关键词 (Horizontal Bar)
```javascript
new Chart(ctx, {
  type: 'bar',
  data: {labels: ['kw1','kw2',...], datasets: [{data: [8,7,...], backgroundColor: greens}]},
  options: {indexAxis:'y', plugins:{legend:{display:false}}}
});
```

### 3. 差评痛点分布 (Doughnut)
```javascript
new Chart(ctx, {
  type: 'doughnut',
  data: {labels: ['痛点1','痛点2',...], datasets: [{data: [9,8,...], backgroundColor: colors}]}
});
```

### 4. 痛点雷达对比 (Radar)
```javascript
new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['维度1','维度2',...],
    datasets: [
      {label:'Product A', data:[4,2,...], backgroundColor:'rgba(15,52,96,0.2)', borderColor:'#0f3460'},
      {label:'Product B', data:[3,8,...], backgroundColor:'rgba(233,69,96,0.2)', borderColor:'#e94560'}
    ]
  },
  options: {scales:{r:{beginAtZero:true,max:10}}}
});
```

### 5. 使用场景分布 (PolarArea)
```javascript
new Chart(ctx, {
  type: 'polarArea',
  data: {labels: ['场景1','场景2',...], datasets: [{data: [4,3,...], backgroundColor: rgbaColors}]}
});
```

### 6. 差评率趋势 (Line)
```javascript
new Chart(ctx, {
  type: 'line',
  data: {labels: months, datasets: [{label:'差评率', data: pcts, borderColor:'#e94560', tension:0.3}]}
});
```

### 7. 词频柱状图 (Bar)
```javascript
new Chart(ctx, {
  type: 'bar',
  data: {labels: words, datasets: [{data: counts, backgroundColor: '#0f3460'}]}
});
```

## CSS卡片模板
```css
.card { background:white; border-radius:12px; padding:24px; margin-bottom:20px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.card h2 { color:#0f3460; border-left:4px solid #e94560; padding-left:12px; }
.insight { background:#fffbeb; border-left:4px solid #f6ad55; padding:16px; border-radius:0 8px 8px 0; }
.insight.green { background:#f0fff4; border-color:#48bb78; }
.insight.red { background:#fff5f5; border-color:#fc8181; }
.insight.blue { background:#ebf8ff; border-color:#4299e1; }
```