如何在Highchart中使用变量？

Question

如何将PHP变量传递给highchart？首先，PHP变量可以传递给JS并正常转到html，但是我想使用PHP变量然后将它传递给highchart中的serie数据（DATA 1，DATA 2）。我尝试用变量替换值，但它不起作用。

请建议我如何完成此操作。

PHP代码

$main_data = ['wattsValue' => [], 'kwhValue' => []];
while($row = $result_1->fetch_assoc()){
    $main_data['wattsValue'][] = $row['power'];
}

while($row = $result_2->fetch_assoc()){
    $main_data['kwhValue'][] = $row['energy'];
}

$conn->close();
header('Content-Type: application/json');
echo json_encode($main_data);
http_response_code(200);

JS代码

$(document).ready(function (){
	function read(){
		$.post("get_db.php", 
		function(data, status){
		if(status == 'success'){
                  $('#watts_value').text(data.wattsValue.join(','));
                  $('#kwh_value').text(data.kwhValue.join(','));
		}
		else{
			$('#info').html("Error!");
		}
		});
	};

	read();
	setInterval(read,1000);

Highcharts.chart('graph_power', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'World\'s largest cities per 2014'
    },
    subtitle: {
        text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
    },
    series: [{
        name: 'Population',
        data: [
            ['Shanghai', DATA1],
            ['Lagos', DATA2],
            ['Istanbul', 14.2],
            ['Karachi', 14.0],
        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // one decimal
            y: 10, // 10 pixels down from the top
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});

});

HTML代码

<div id="watts_value"></div><div class="watts">watts</div>
<div id="kwh_value"></div><div class="kwh">kWh</div>
<div id="graph_power"></div>

Answer 1

＆＃13;

＆＃13;

$(document).ready(function() {
  function read() {
    $.post("get_db.php",
      function(data, status) {
        if (status == 'success') {
          var DATA1 ;
          var DATA2 ;
          for (var i = 0; i < data.length; i++) {
            DATA1+=Number(data[i].wattsValue); //to get sum of wattsValue
            DATA2+=Number(data[i].kwhValue); //to get sum of kwhValue
          }
          $('#watts_value').text(data.wattsValue.join(','));
          $('#kwh_value').text(data.kwhValue.join(','));
          populateChart(DATA1, DATA2) //pass arguments to function
        } else {
          $('#info').html("Error!");
        }
      });
  };

  read();
  setInterval(read, 1000);

  function populateChart(DATA1, DATA2) {
    Highcharts.chart('graph_power', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'World\'s largest cities per 2014'
      },
      subtitle: {
        text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
      },
      xAxis: {
        type: 'category',
        labels: {
          rotation: -45,
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Population (millions)'
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
      },
      series: [{
        name: 'Population',
        data: [
          ['Shanghai', DATA1],
          ['Lagos', DATA2],
          ['Istanbul', 14.2],
          ['Karachi', 14.0],
        ],
        dataLabels: {
          enabled: true,
          rotation: -90,
          color: '#FFFFFF',
          align: 'right',
          format: '{point.y:.1f}', // one decimal
          y: 10, // 10 pixels down from the top
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      }]
    });
  }
});

＆＃13;

＆＃13;

＆＃13;