在Javascript中将数据可视化为颜色条

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

// 数据源，可以是一个二维数组，每一项代表一个数据点的值
var data = [
  [0, 0, 10],   // x, y, value
  [0, 1, 20],
  [0, 2, 30],
  // 更多数据...
];

// 配置选项
var options = {
  chart: {
    type: 'heatmap'  // 指定图表类型为颜色条
  },
  title: {
    text: '数据可视化为颜色条'  // 图表标题
  },
  xAxis: {
    categories: ['A', 'B', 'C'],  // x轴坐标分类
  },
  yAxis: {
    categories: ['X', 'Y', 'Z'],  // y轴坐标分类
  },
  colorAxis: {
    min: 0,  // 颜色映射最小值
    max: 100,  // 颜色映射最大值
    stops: [
      [0, '#FFFFFF'],  // 颜色映射关系
      [1, '#FF0000']
    ],
  },
  series: [{
    name: '数据',  // 数据系列名称
    borderWidth: 1,  // 方块边框宽度
    data: data,  // 数据源
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
};

// 创建图表
var chart = Highcharts.chart('container', options);