一条数据动态生成多个HighCharts图

一条数据动态生成多个HighCharts图

效果图

使用的数据

bht: [{
        'type_tr': 'A',
        'datax': [
          1000, 100, 1200
        ],
        'datay': ['零件01', '零件03', '零件05']
      }, {
        'type_tr': 'B',
        'datax': [2000],
        'datay': ['零件02']
      }, {
        'type_tr': 'C',
        'datax': [1100, 3200],
        'datay': [
          '零件04', '零件06'
        ]
      }, {
        'type_tr': 'C',
        'datax': [1100, 3200],
        'datay': [
          '零件04', '零件06'
        ]
      }, {
        'type_tr': 'C',
        'datax': [1100, 3200],
        'datay': [
          '零件04', '零件06'
        ]
      }]

HTML代码

<div id="test" style="border:1px dashed #000;text-align:center;"></div>

遍历数据动态生成div

	get_div () {
      var divTest = document.getElementById('test')
      console.log(divTest)
      for (let i = 0; i < this.bht.length; i++) {
        var oDiv = document.createElement('div')
        oDiv.id = 'bht' + i
        oDiv.style = 'width:19%;height:200px;text-align:center;display: inline-block;margin-right:1%'
        divTest.appendChild(oDiv)
        this.empStatices('bht' + i, this.bht[i]) //每次遍历时执行empStatices方法
      }
    },
    //每次遍历时生成highcharts图
	empStatices (id, data) {
      Highcharts.chart(id, {
        title: {
          text: data.type_tr
        },
        xAxis: {
          categories: data.datay,
          tickInterval: 0,
          crosshair: true,
          title: {
            text: '日期'
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: data.type_tr
          }
        },
        plotOptions: {
          areaspline: {
            fillOpacity: 0.5
          }
        },
        series: [{
          name: data.type_tr,
          data: data.datax
        }]
      })
    }