JSON을 사용하여 Plotly.js의 여러 시리즈와 관련된 문제

초보자로 거의 모든 머리카락을 꺼 냈습니다 - 도움이 필요합니다! 나는 하나의 배열에 대한 JSON 데이터를 plotly.js로 전달하고로드 할 수있었습니다. 여러 시리즈에 관해서는 또 다른 이야기입니다. 내가 상상할 수있는 모든 조합을 시도했지만 아직 두 개의 배열을 플롯으로로드 할 수는 없습니다.JSON을 사용하여 Plotly.js의 여러 시리즈와 관련된 문제

[[{ 
"x": ["2017-05-01", "2017-04-01", "2017-03-01", "2017-02-01", "2017-01-01", "2016-12-01", "2016-11-01", "2016-10-01", "2016-09-01", "2016-08-01", "2016-07-01", "2016-06-01", "2016-05-01", "2016-04-01", "2016-03-01", "2016-02-01", "2016-01-01", "2015-12-01", "2015-11-01", "2015-10-01", "2015-09-01", "2015-08-14", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01", "2014-12-18", "2014-12-01", "2014-11-13", "2014-11-01"], 
"y": ["3327.44", "3256.09", "3307.31", "3167.08", "3121.70", "3094.00", "2994.47", "3030.34", "3013.37", "3024.04", "2947.38", "2894.87", "2906.35", "3100.24", "2927.34", "2935.27", "3068.91", "3160.94", "3142.50", "2974.55", "2983.94", "3116.90", "3126.30", "3075.40", "3101.00", "3107.80", "3022.40", "3120.06", "3053.10", "3020.80", "3007.00", "3019.16", "2995.00", "2961.00"], 
"type": "bar", 
"name": "trace1" 
}], [{ 
"x": ["2017-05-01", "2017-04-01", "2017-03-01", "2017-02-01", "2017-01-01", "2016-12-01", "2016-11-01", "2016-10-01", "2016-09-01", "2016-08-01", "2016-07-01", "2016-06-01", "2016-05-01", "2016-04-01", "2016-03-01", "2016-02-01", "2016-01-01", "2015-12-01", "2015-11-01", "2015-10-01", "2015-09-01", "2015-08-14", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01", "2014-12-18", "2014-12-01", "2014-11-13", "2014-11-01"], 
"y": ["1899.84", "1873.44", "1903.07", "1831.94", "1806.00", "1767.83", "1622.87", "1685.99", "1682.28", "1670.96", "1596.70", "1593.97", "1565.10", "1545.14", "1444.32", "1444.77", "1548.85", "1599.87", "1579.56", "1476.74", "1538.82", "1624.90", "1647.60", "1647.00", "1682.20", "1683.00", "1651.40", "1674.92", "1632.90", "1615.10", "1621.00", "1645.25", "1629.00", "1614.00"], 
"type": "bar", 
"name": "trace2" 
}]]

모든이 시점까지 노력하고 있습니다 :

$result = $mysqli->query($query) or die($mysqli->error); 
//loop through the returned data 

$x = array(); 
$y = array(); 
$m = array(); 
$n = array(); 

while($query_result = $result->fetch_assoc()) { 
$x[] = $query_result['date']; 
$y[] = $query_result['non_retirement']; 
$m[] = $query_result['retirement']; 
$n[] = $query_result['total']; 
} 

$trace1 = [ [ 
"x" => $x, 
"y" => $y, 
"type" => "bar", 
"name" => "trace1" 
] ]; 

$trace2 = [ [ 
"x" => $x, 
"y" => $m, 
"type" => "bar", 
"name" => "trace2" 
] ]; 

$data = [$trace1, $trace2]; 

//free memory associated with result 
$result->close(); 

//close connection 
$mysqli->close(); 

//now print the data 
print json_encode($data);

이 다음 JSON 결과를 제공합니다 :

PHP 코드로 끝납니다.

어려운 부분은 - JSON 응답을 플롯으로 연결하여 누적 막 대형 차트를 생성하는 올바른 형식/구문은 무엇입니까? 나는 수색하고 수색하고 해킹하고 아무 소용이 없어야 만했다. HTML/JS에서 내 마지막 시도는 다음과 같습니다

<script type="text/javascript"> 
     var layout6 = { 
      margin: { 
       l: 80, 
       r: 80, 
       t: 0, 
       b: 80 
      }, 
      font: { 
       family: 'Raleway', 
       size: 14, 
       color: '#444444' 
      }, 
      xaxis: { 
       tickangle: -45, 
       tickfont: { 
        size: 14, 
        color: '#444444' 
       } 
      }, 
      yaxis: { 
       title: 'amount' 
      } 
      }; 
     $.get('./php/chttest.php', null, function(data) { 
      Plotly.newPlot('chttest', [[trace1 = { 
       x: data[0].x, y: data[0].y 
      }], 
      [trace2 = { 
       x: data[0].x, y: data[0].y 
       }]], 
      layout6,{displaylogo: false}); 
     }, "json"); 
    </script> 
    <h1>Investments - total</h1> 
    <div id="chttest" style="width:670px;height:525px;"></div> 
     <br><br><br><br> 
    </section> 
    </div> 
</body> 
</html>

출처

2017-05-09 Steve1754a

귀하의 JSON은 이중 중첩 된 배열처럼 작동합니다 당신의 흔적 주위에 대괄호를 제거하는 경우, 또는 당신이 아래의 예와 같이 Plotly에 데이터를 전달할 수 보이는 ([data[0][0], data[1][0]]).

var data = [[{ 
 
"x": ["2017-05-01", "2017-04-01", "2017-03-01", "2017-02-01", "2017-01-01", "2016-12-01", "2016-11-01", "2016-10-01", "2016-09-01", "2016-08-01", "2016-07-01", "2016-06-01", "2016-05-01", "2016-04-01", "2016-03-01", "2016-02-01", "2016-01-01", "2015-12-01", "2015-11-01", "2015-10-01", "2015-09-01", "2015-08-14", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01", "2014-12-18", "2014-12-01", "2014-11-13", "2014-11-01"], 
 
"y": ["3327.44", "3256.09", "3307.31", "3167.08", "3121.70", "3094.00", "2994.47", "3030.34", "3013.37", "3024.04", "2947.38", "2894.87", "2906.35", "3100.24", "2927.34", "2935.27", "3068.91", "3160.94", "3142.50", "2974.55", "2983.94", "3116.90", "3126.30", "3075.40", "3101.00", "3107.80", "3022.40", "3120.06", "3053.10", "3020.80", "3007.00", "3019.16", "2995.00", "2961.00"], 
 
"type": "bar", 
 
"name": "trace1" 
 
}], [{ 
 
"x": ["2017-05-01", "2017-04-01", "2017-03-01", "2017-02-01", "2017-01-01", "2016-12-01", "2016-11-01", "2016-10-01", "2016-09-01", "2016-08-01", "2016-07-01", "2016-06-01", "2016-05-01", "2016-04-01", "2016-03-01", "2016-02-01", "2016-01-01", "2015-12-01", "2015-11-01", "2015-10-01", "2015-09-01", "2015-08-14", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01", "2014-12-18", "2014-12-01", "2014-11-13", "2014-11-01"], 
 
"y": ["1899.84", "1873.44", "1903.07", "1831.94", "1806.00", "1767.83", "1622.87", "1685.99", "1682.28", "1670.96", "1596.70", "1593.97", "1565.10", "1545.14", "1444.32", "1444.77", "1548.85", "1599.87", "1579.56", "1476.74", "1538.82", "1624.90", "1647.60", "1647.00", "1682.20", "1683.00", "1651.40", "1674.92", "1632.90", "1615.10", "1621.00", "1645.25", "1629.00", "1614.00"], 
 
"type": "bar", 
 
"name": "trace2" 
 
}]]; 
 
Plotly.plot('myPlot', [data[0][0], data[1][0]]);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id='myPlot'></div>

출처

2017-05-10 07:08:20

와우! 그것은 효과가 있었다. 많은, 많은 감사 !! – Steve1754a

JSON을 사용하여 Plotly.js의 여러 시리즈와 관련된 문제

답변

관련 문제