highCharts 热力图左右滚动、外部导出

最新推荐文章于 2024-06-05 16:57:51 发布

cc随记

最新推荐文章于 2024-06-05 16:57:51 发布

阅读量706

点赞数

分类专栏： highcharts 文章标签： javascript 开发语言前端

本文链接：https://blog.youkuaiyun.com/m0_46251434/article/details/123556316

版权

highcharts 专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何利用Highcharts库创建一个可滚动的热力图来展示相关系数，并实现了点击导出图表为PNG图片的功能。文章详细展示了配置选项，包括x轴和y轴的设置、颜色轴的渐变效果、提示信息以及数据标签等，确保了图表的清晰易读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<highcharts :options="options" ref="mychart"></highcharts>
<div @click="download">导出</div>

<script>
  import Highcharts from 'highcharts/highstock'
  export default {
    data () {
      return {
        // 初始化空对象
        options: {
          chart: {
            type: 'heatmap',
            scrollablePlotArea: { // 滚动
              scrollPositionX: 0, // 初始滚动位置 0-左 1-右
              opacity: 1
            }
          },
          xAxis: {
            categories: [],
            opposite: true
          },
          yAxis: {
            categories: [],
            title: null,
            reversed: true,
            labels: {
              formatter: function () {
                return this.value.length > 15 ? this.value.slice(0, 14) + '...' : this.value
              }
            }
          },
          colorAxis: {
            min: -1,
            max: 1,
            stops: [
              [0, '#009900'],
              [0.3, Highcharts.Color('#009900').setOpacity(0.6).get('rgba')],
              [0.5, '#ffffff'],
              [0.7, Highcharts.Color('#fb4b4c').setOpacity(0.6).get('rgba')],
              [1, Highcharts.Color('#fb4b4c').setOpacity(1).get('rgba')]
            ]
          },
          credits: {
            enabled: false
          },
          tooltip: {
            formatter: function () {
              return '<b>' + this.series.xAxis.categories[this.point.x] + '</b><br><b>' +
                this.series.yAxis.categories[this.point.y] + '</b><br><b>' + '相关系数：' + '</b><b>' +
                this.point.value + '</b>'
            }
          },
          exporting: {
            enabled: false
          },
          series: [{
            name: '相关系数',
            borderWidth: 0,
            data: [],
            dataLabels: {
              enabled: true,
              // useHTML: true,
              color: '#033E14',
              style: { textOutline: 'none', fontWeight: 'normal', fontSize: '13px', fontFamily: 'Microsoft YaHei,SimSun,sans-serif' }
            }
          }]
        },
        nameArr: ['春', '夏', '秋', '冬'],
        lth: null
      }
    },
    methods: {
      // 绘图
      drawGraph (data) {
        this.lth = data.length
        if (this.lth > 1) { // 必须至少2个数据才有相关系数
          this.options.chart.scrollablePlotArea.scrollPositionX = 0
          this.options.chart.scrollablePlotArea.minWidth = 136 * lth
          this.options.chart.height = 40 * lth + 40
          const serieData = []
          for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < data.length; j++) {
              if (i === j) {
                data[i][j] = 1
                const series = [i, j, '1.0000']
                serieData.push(series)
              } else {
                if (data[i][j] !== '-') {
                  const series = [i, j, data[i][j])]
                  serieData.push(series)
                } else {
                  const series = {
                    x: i,
                    y: j,
                    value: '-',
                    color: 'white'
                  }
                  serieData.push(series)
                }
              }
            }
          }
          this.options.series[0].data = serieData
          // 参数
          this.options.xAxis.categories = this.nameArr
          this.options.yAxis.categories = this.nameArr
        }
      },
      download () {
        this.$refs.mychart.chart.exportChart({
          type: 'image/png',
          sourceWidth: this.lth * 136
        })
      }
    }
  }
</script>

在这里插入图片描述