내 json을 간단한 js 선 차트로 구문 분석하는 방법을 찾고 있습니다. 나는 ChartJS를 시도했지만 Google Charts를 시도한 것보다 성공하지 못했습니다.
문제는 구문 분석 할 JSON이 길고이를 필터링하고 Google 차트로 구문 분석하는 방법을 찾을 수 없다는 것입니다.
JSON을 필터링하고 하나의 노드에 대한 값과 날짜 만 가져오고 싶습니다 (예 : ABEV3아래 JSON에서 값 가져 오기 ).
JSON :
{
"RAIL3": {
"2021-02-12": "20.18",
"2021-02-11": "19.81",
"2021-02-10": "20.13",
"2021-02-09": "20.85",
"2021-02-08": "21.35",
"2021-02-05": "21.35",
"2021-02-04": "21.50",
"2021-02-03": "21.70",
"2021-02-02": "20.77",
"2021-02-01": "21.10",
"2021-01-29": "20.30",
"2021-01-28": "20.92",
"2021-01-27": "20.74",
"2021-01-26": "20.67",
"2021-01-22": "20.85",
"2021-01-21": "20.89",
"2021-01-20": "21.03",
"2021-01-19": "21.10",
"2021-01-18": "20.92",
"2021-01-15": "21.21",
"2021-01-14": "20.74"
},
"ABEV3": {
"2021-02-12": "14.79",
"2021-02-11": "14.95",
"2021-02-10": "15.01",
"2021-02-09": "14.96",
"2021-02-08": "14.94",
"2021-02-05": "15.52",
"2021-02-04": "15.60",
"2021-02-03": "15.68",
"2021-02-02": "15.61",
"2021-02-01": "15.60",
"2021-01-29": "15.11",
"2021-01-28": "15.54",
"2021-01-27": "15.39",
"2021-01-26": "15.40",
"2021-01-22": "15.15",
"2021-01-21": "15.61",
"2021-01-20": "16.02",
"2021-01-19": "16.27",
"2021-01-18": "16.22",
"2021-01-15": "15.95",
"2021-01-14": "16.26"
},
"BBAS3": {
"2021-02-12": "33.75",
"2021-02-11": "33.94",
"2021-02-10": "33.81",
"2021-02-09": "34.28",
"2021-02-08": "33.87",
"2021-02-05": "33.96",
"2021-02-04": "34.19",
"2021-02-03": "34.33",
"2021-02-02": "34.06",
"2021-02-01": "34.29",
"2021-01-29": "33.86",
"2021-01-28": "34.54",
"2021-01-27": "33.59",
"2021-01-26": "32.79",
"2021-01-22": "33.69",
"2021-01-21": "34.18",
"2021-01-20": "34.53",
"2021-01-19": "35.32",
"2021-01-18": "35.93",
"2021-01-15": "36.30",
"2021-01-14": "37.46"
}
}
코드:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "jsonfile.json",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Line(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 400});
}
</script>
<div id="chart_div" style="width: 100%; height: 100%"></div>
responseJSON대신 사용할 수 있습니다 responseText.ABEV3의 값을 검색 할 수 있습니다 .ABEV3jsonData.ABEV3google.visualization.Line에 google.visualization.LineChart.위의 사항이 스크립트에 반영되면 다음과 같이됩니다.
drawChart()다음과 같이 수정하십시오 .
function drawChart() {
var jsonData = $.ajax({
url: "jsonfile.json",
dataType: "json",
async: false
}).responseJSON;
var key = "ABEV3"; // Please set the key you want to use.
var ar = Object.entries(jsonData[key]).map(([a, b]) => [a, Number(b)]);
var data = new google.visualization.DataTable();
data.addColumn('string', 'date');
data.addColumn('number', 'value');
data.addRows(ar);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 400});
}
url: "jsonfile.json",질문에 JSON 데이터를 반환 할 수 있다고 가정합니다 . 조심하세요.이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다