วิธีป้อนข้อมูลใน Highcharts จากไฟล์ Excel

ฉันต้องการให้อินพุตข้อมูลไปยัง Highcharts จากไฟล์ Excel ของฉัน (info.xlsx) ฉันเขียนโค้ดด้วย php ซึ่งรับข้อมูลจากไฟล์ Excel และแปลงเป็น JSON โค้ด php ของฉันทำงานได้อย่างสมบูรณ์แบบและให้เอาต์พุตในรูปแบบ JSON ฉันต้องการให้อินพุตนี้กับ Highchart และเมื่อใดก็ตามที่ฉันเปลี่ยนข้อมูล ก็ควรอัปเดตตัวเองตามนั้น ฉันได้เห็นแผนภูมิสาธิตจากแหล่งที่มานี้(http://www.highcharts.com/demo/pie-basic) ในแหล่งนี้ นักพัฒนาได้ฝังข้อมูลตัวอย่างไว้ในโค้ด ฉันต้องการให้ชุดข้อมูลจากไฟล์ Excel ฉันกำลังแชร์ไฟล์ php และไฟล์ js ของฉัน ฉันต้องการข้อเสนอแนะ

threeG.php // ใช้ไฟล์ xlsx และสร้าง json

<?php
header('Cache-Control: no-cache, must-revalidate');
header("Expires: Sat,26 Jul 1997 05:00:00 GMT");
header('Content-type: application/json');
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
require_once('phpexcel/Classes/PHPExcel/IOFactory.php');
if(!file_exists("info.xlsx"))
{
    die("No File Exist");
}
$objPHPExcel = phpexcel_IOFactory::load("info.xlsx");
$objWorkSheet= $objPHPExcel->getActiveSheet();
define('Days',7);
$info=array();
$count=array();
$threeG_info= array($info,$count);
for ($col=0; $col < count($threeG_info); $col++)
{
    for ($row=1;$row<= Days+1;$row++)
    {
        $threeG_info[$col][$row-1]= $objWorkSheet-> getCellByColumnAndRow($col,$row)->getValue();
    }
}
echo json_encode($threeG_info);
?>

นี่คือไฟล์ js ของฉัน ตำแหน่งที่ฉันต้องการให้ข้อมูลจากไฟล์ Excel ของฉัน

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 1,//null,
            plotShadow: false
        },
        title: {
            text: '3G Information'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Pie share',
            data: [

              **Want to give input here**
            ]
        }]
    });
});
$.ajax({
    url: "threeG.php",
    cache:false,
    type: 'json'
}).success(function(data)
{console.log(data);
}).error(function()
{
    alert('Error retrieving information');
});

person Umar Farooq    schedule 25.08.2014    source แหล่งที่มา


คำตอบ (1)


เพียงสร้างแผนภูมิภายในการโทรกลับสำหรับ $.ajax() เช่นนี้

$.ajax({
    url: "threeG.php",
    cache:false,
    type: 'json'
}).success(function(data) {
    $('#container').highcharts({
        // some options..
        series: [{
            data: data
        }]
    });
}).error(function(){
    alert('Error retrieving information');
});
person Paweł Fus    schedule 25.08.2014
comment
สิ่งที่ควรอยู่ที่นี่? ( series: [{ type: 'pie', name: 'Pie share', data: [ Here]// ฉันจะเพิ่มช่วงที่นี่ได้อย่างไร }]) - person Umar Farooq; 25.08.2014
comment
ฉันไม่เข้าใจคำถามของคุณ คุณได้ลองวิธีแก้ปัญหาของฉันแล้วหรือยัง? หากไม่ได้ผล ตรวจสอบให้แน่ใจว่าคุณมีรูปแบบที่เหมาะสมสำหรับ Highcharts: api.highcharts.com/ highcharts#series.data - person Paweł Fus; 25.08.2014