如何在amCharts中使用dataLoader获取数据? [英] How to get the data using dataLoader in amCharts?
问题描述
我正在使用amCharts库(这是一个用于在图表中加载数据的JavaScript库)从mySQL数据库中提取数据,并使用股票图表"进行显示.
I'm using amCharts library (it's a JavaScript library for loading data in charts) to extract the data from mySQL database, and display it using a Stock Chart.
我在这里找到了完整的教程:
I found a complete tutorial here:
http://www.amcharts.com/tutorials/your-first -stock-chart/
他们使用在代码中创建的静态数据,但是我想通过以JSON格式从数据库提取数据来使用自己的数据.
They use static data that they have created in the code, however I want to use my own data by extracting it from database in JSON format.
PHP文件包括: json_encode.php
The PHP file to include: json_encode.php
<?php
include("data.php");
echo json_encode($rows);
?>
此文件的输出如下所示:
The output of this file look like this:
[{"date":"2014-01-19 00:00:00","value":"15"},{"date":"2014-04-19 00:00:00","value":"8"},{"date":"2014-05-19 00:00:00","value":"54"},{"date":"2014-07-19 00:00:00","value":"5"},{"date":"2014-09-19 00:00:00","value":"24"},{"date":"2014-11-19 00:00:00","value":"18"},{"date":"2015-01-19 00:00:00","value":"36"},{"date":"2015-02-19 00:00:00","value":"10"},{"date":"2015-03-11 16:54:55","value":"7"},{"date":"2015-03-19 00:00:00","value":"45"},{"date":"2015-04-19 00:00:00","value":"17"},{"date":"2015-05-19 00:00:00","value":"4"},{"date":"2015-06-19 00:00:00","value":"27"}]
教程中的完整代码:
<script type="text/javascript">
var chartData= [
{date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10},
{date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11},
{date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12},
{date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11},
{date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10},
{date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11},
{date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13},
{date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14},
{date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17},
{date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13}
];
AmCharts.ready(function() {
var chart = new AmCharts.AmStockChart();
chart.pathToImages = "amcharts/images/";
var dataSet = new AmCharts.DataSet();
dataSet.dataProvider = chartData;
dataSet.fieldMappings = [{fromField:"val", toField:"value"}];
dataSet.categoryField = "date";
chart.dataSets = [dataSet];
var stockPanel = new AmCharts.StockPanel();
chart.panels = [stockPanel];
var legend = new AmCharts.StockLegend();
stockPanel.stockLegend = legend;
var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.startDuration = 1;
chart.panelsSettings = panelsSettings;
var graph = new AmCharts.StockGraph();
graph.valueField = "value";
graph.type = "column";
graph.title = "MyGraph";
graph.fillAlphas = 1;
stockPanel.addStockGraph(graph);
var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
categoryAxesSettings.dashLength = 5;
chart.categoryAxesSettings = categoryAxesSettings;
var valueAxesSettings = new AmCharts.ValueAxesSettings();
valueAxesSettings .dashLength = 5;
chart.valueAxesSettings = valueAxesSettings;
var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
chartScrollbarSettings.graph = graph;
chartScrollbarSettings.graphType = "line";
chart.chartScrollbarSettings = chartScrollbarSettings;
var chartCursorSettings = new AmCharts.ChartCursorSettings();
chartCursorSettings.valueBalloonsEnabled = true;
chart.chartCursorSettings = chartCursorSettings;
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.periods = [{period:"DD", count:1, label:"1 day"},
{period:"DD", selected:true, count:5, label:"5 days"},
{period:"MM", count:1, label:"1 month"},
{period:"YYYY", count:1, label:"1 year"},
{period:"YTD", label:"YTD"},
{period:"MAX", label:"MAX"}];
chart.periodSelector = periodSelector;
chart.write("chartdiv");
});
因此,代替此行:
dataSet.dataProvider = chartData;
我想使用dataLoader以JSON格式从PHP加载数据:
I want to use dataLoader to load the data from PHP in JSON format:
dataSet.dataloader = {
"url": "json_encode.php"
},
也许dataLoader的声明不正确,因为它不起作用.
Maybe the declaration of dataLoader is not correct because it doesn't work.
任何帮助将不胜感激:)
Any help will be appreciated :)
推荐答案
虽然为时已晚,以防万一有人遇到这个问题...
Although it's a bit late, just in case anyone comes across this question...
按照AmCharts提供的DataLoader教程进行操作,所有步骤都进行了清楚的描述,甚至还有一个股票图表示例. https://www.amcharts.com/tutorials/using-data-loader-插件/
Follow the tutorial given by AmCharts for DataLoader, all steps are described clearly and there even is an example for Stock charts. https://www.amcharts.com/tutorials/using-data-loader-plugin/
这篇关于如何在amCharts中使用dataLoader获取数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!