2014-01-04 2 views
0

EDIT 2: Я нашел this article и создал файл .htaccess в корневой директории моего сайта в WAMP со следующими двумя строками:D3JS не работает на WAMP

AddType image/svg+xml svg svgz 
AddEncoding gzip svgz 

Но до сих пор нет ошибок и никаких графиков. Может ли быть проблема с WAMP? Как я уже говорил, этот код работает на моем интернет-сайте ...


EDIT: Я разместил «предупреждение (d.max_energy)» в коде, и я могу видеть значения JSON возвращающимся на страницу клиента. Он просто не обрабатывается в диаграмме и не жалуется на ошибку.


Я уверен, что это простое исправление, но я не вижу его. У меня есть следующий код на размещенном сайте, который работает нормально и теперь реплицирован на локальном сервере WAMP (другой компьютер в моей сети с ПК разработки), но не выполняет/не вызывает ошибку в Console/Inspect.

Любая помощь приветствуется.

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 
jQuery(document).ready(function() { 
    CreateBarChart("http://10.0.0.13/sma/sma-php/inverterdata.php?var=PDAY&id=P100023", "#daychart"); 
    CreateBarChart("http://10.0.0.13/sma/sma-php/inverterdata.php?var=PWEEK&id=P100023", "#weekchart"); 
    CreateBarChart("http://10.0.0.13/sma/sma-php/inverterdata.php?var=PMONTH&id=P100023", "#monthchart"); 
    CreateBarChart("http://10.0.0.13/sma/sma-php/inverterdata.php?var=PYEAR&id=P100023", "#yearchart"); 
    CreateBarChart("http://10.0.0.13/sma/sma-php/inverterdata.php?var=PLIFE&id=P100023", "#lifechart"); 
}); 

function CreateBarChart(url, divid) { 

var margin = {top: 20, right: 0, bottom: 30, left: 30}, 
    width = 838 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(10); 

var svg = d3.select(divid) 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.json(url, function(error, data) { 
    data.forEach(function(d) { 
     d.max_energy = +d.max_energy; 
    }); 

    x.domain(data.map(function(d) { return d.xaxis; })); 
    y.domain([0, d3.max(data, function(d) { return d.max_energy ; })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .append("text") 
     .attr("transform", "rotate(0)") 
     .attr("y", 23) 
     .attr("x", 340) 
     .attr("dy", ".71em") 
     .style("text-anchor", "bottom") 
     .text("Time/Date/Month/Year"); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(0)") 
     .attr("y", -15) 
     .attr("x", -25) 
     .attr("dy", ".71em") 
     .style("text-anchor", "top") 
     .text("Energy - KWh"); 

    svg.selectAll(".bar") 
     .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.xaxis); }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { return y(d.max_energy); }) 
     .transition().delay(function (d,i){ return i * 10;}).duration(10) 
     .attr("height", function(d) { return height - y(d.max_energy); }) 

    svg.selectAll(".label") 
     .data(data) 
    .enter().append("svg:text") 
     .attr("class", "label") 
     .attr("x", function(d) { 
      return x(d[d.xaxis]) + x.rangeBand()/3; 
     }) 
     .attr("y", function(d) { 
      return y(d[d.max_energy]) - 5; 
     }) 
     .text(function(d) { 
      return y(d[d.max_energy]); 
     });; 

}); 
}; 
</script> 

в файле inverterdata.php У меня есть следующий код:

<?php 
    $param = $_GET["var"]; 
    $id = $_GET["id"]; 

    $username = "root"; 
    $password = ""; 
    $host = "localhost"; 
    $database="sma"; 

    $server = mysql_connect($host, $username, $password); 
    $connection = mysql_select_db($database, $server); 

switch ($param) { 
    case "CDAY": 
    $myquery = "SELECT poll_hour as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE customer_code = '".$id."' AND poll_day = DAY(DATE(NOW())) AND poll_month = MONTH(DATE(NOW())) AND poll_year = YEAR(DATE(NOW())) GROUP BY xaxis ORDER BY xaxis"; 
    break; 
    case "CWEEK": 
    $myquery = "SELECT CONCAT(LPAD(poll_month, 2, '0'), LPAD(poll_day, 2, '0')) as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE customer_code = '".$id."' AND poll_year = YEAR(NOW()) AND poll_month = MONTH(NOW()) AND poll_day > DAY(NOW()) - 8 GROUP BY xaxis ORDER BY xaxis"; 
    break; 
    case "CMONTH": 
    $myquery = "SELECT CONCAT(LPAD(poll_month, 2, '0'), LPAD(poll_day, 2, '0')) as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE customer_code = '".$id."' AND poll_year = YEAR(NOW()) AND poll_month = MONTH(NOW()) GROUP BY xaxis ORDER BY xaxis"; 
    break; 
    case "CYEAR": 
    $myquery = "SELECT CONCAT(poll_year, LPAD(poll_month, 2, '0')) as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE customer_code = '".$id."' AND poll_year = YEAR(NOW()) GROUP BY xaxis ORDER BY xaxis"; 
    break; 
    case "CLIFE": 
    $myquery = "SELECT poll_year as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE customer_code = '".$id."' GROUP BY xaxis ORDER BY xaxis"; 
    break; 
    case "PDAY": 
    $myquery = "SELECT poll_hour as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE partner_code = '".$id."' AND poll_day = '28' AND poll_month = '12' AND poll_year = '2013' GROUP BY xaxis ORDER BY xaxis"; 
    break; 
    case "PWEEK": 
    $myquery = "SELECT CONCAT(LPAD(poll_month, 2, '0'), LPAD(poll_day, 2, '0')) as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE partner_code = '".$id."' AND poll_year = '2013' AND poll_month = '12' AND poll_day > '21' GROUP BY xaxis ORDER BY xaxis"; 
    break; 
    case "PMONTH": 
    $myquery = "SELECT CONCAT(LPAD(poll_month, 2, '0'), LPAD(poll_day, 2, '0')) as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE partner_code = '".$id."' AND poll_year = '2013' AND poll_month = '12' GROUP BY xaxis ORDER BY xaxis"; 
    break; 
    case "PYEAR": 
    $myquery = "SELECT CONCAT(poll_year, LPAD(poll_month, 2, '0')) as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE partner_code = '".$id."' AND poll_year = '2013' GROUP BY xaxis ORDER BY xaxis"; 
    break; 
    case "PLIFE": 
    $myquery = "SELECT poll_year as xaxis, SUM(energy) as max_energy, SUM(efficiency) as max_efficiency FROM sma_inverter_data WHERE partner_code = '".$id."' GROUP BY xaxis ORDER BY xaxis"; 
    break; 
} 

    $query = mysql_query($myquery); 

    if (! $query) { 
     echo mysql_error(); 
     die; 
    } 

    $data = array(); 

    for ($x = 0; $x < mysql_num_rows($query); $x++) { 
     $data[] = mysql_fetch_assoc($query); 
    } 

    echo json_encode($data);  

    mysql_free_result($query); 

    mysql_close($server); 
?> 

Когда я выполняю вручную через адресную строку браузера один из PHP скрипт вызывает я вернусь действительный JSON следующим образом:

http://10.0.0.13/sma/sma-php/inverterdata.php?var=PLIFE&id=P100023 

JSON:

[{"xaxis":"2012","max_energy":"305923.303","max_efficiency":"13019.572"},{"xaxis":"2013","max_energy":"410400.643","max_efficiency":"17466.284"},{"xaxis":"2014","max_energy":"4538.187","max_efficiency":"193.140"}] 

Моего HTML внутри тега:

<svg id="daychart"></svg> 
<svg id="weekchart"></svg> 
<svg id="monthchart"></svg> 
<svg id="yearchart"></svg> 
<svg id="lifechart"></svg> 

Благодаря

+0

Возможно, это глупый вопрос, но поскольку вы используете 'jQuery (document) .ready (function() {', вы включаете jQuery? –

+0

Привет, cillosis, спасибо за указатель и да JQ ссылается. (). Я использую AVADA шаблон на сайте, который поставляется с JQ 10 как часть его. – TheRealPapa

ответ

0

ДУХА! Я знал, что это передо мной, но не мог его увидеть ... Когда я добавил теги к телу страницы в прессе, я сделал это в «визуальном» поле, а не в «текстовом» поле, и это испортило все теги ...

Смежные вопросы