0

我想使用 AmChart 并通过 JSON 从 MySQL 获取图表数据。

这是我的 js 源代码：

AmCharts.ready(function () {
                //generateChartData();
                createStockChart();
            });
    function createStockChart() {
        var chart = new AmCharts.AmStockChart();
        chart.pathToImages = "../amcharts/images/";

        // DATASETS //////////////////////////////////////////
        $.getJSON("jsonlistdisp.php", function (locdata) {
                $.each(locdata, function (i, item) {
                      $.getJSON("jsonvaluedisp.php?id_disp="+locdata[i].id, function (data) {
                    var newDate = new Date(data.date);
                newDate.setHours(data.hour);

                    var dataSet = new AmCharts.DataSet();
                dataSet.title = locdata[i].name;
                dataSet.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"
                    }];
                    dataSet.dataProvider = data;
                dataSet.categoryField = newDate;

                // set data sets to the chart
                chart.dataSets.push(dataSet);

            });
            });
        });
// PANELS ///////////////////////////////////////////    

                // first stock panel
                var stockPanel1 = new AmCharts.StockPanel();
                stockPanel1.showCategoryAxis = false;
                stockPanel1.title = "Valor";
                stockPanel1.percentHeight = 70;

                // graph of first stock panel
                var graph1 = new AmCharts.StockGraph();
                graph1.valueField = "value";
                graph1.comparable = true;
                graph1.compareField = "value";
                graph1.compareGraphBalloonText="[[value]] kwh"; //mostrar las unidades de medida en el balloon de las comparaciones
                graph1.balloonText= "[[value]] kwh"; //mostrar las unidades de medida en el balloon
                stockPanel1.addStockGraph(graph1);

                // create stock legend                
                stockPanel1.stockLegend = new AmCharts.StockLegend();
                stockPanel1.stockLegend.valueTextRegular="[[value]] kwh"; ////mostrar las unidades de medida en el legend

                // second stock panel
                var stockPanel2 = new AmCharts.StockPanel();
                stockPanel2.title = "Volumen";
                stockPanel2.percentHeight = 30;
                var graph2 = new AmCharts.StockGraph();
                graph2.valueField = "volume";
                graph2.type = "column";
                graph2.showBalloon = false;
                graph2.fillAlphas = 1;
                stockPanel2.addStockGraph(graph2);
                stockPanel2.stockLegend = new AmCharts.StockLegend();
                stockPanel2.stockLegend.valueTextRegular="[[value]] kwh"; ////mostrar las unidades de medida en el legend
                // set panels to the chart
                chart.panels = [stockPanel1, stockPanel2];





                // OTHER SETTINGS ////////////////////////////////////
                var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
                scrollbarSettings.graph = graph1;
                scrollbarSettings.updateOnReleaseOnly = true;
                scrollbarSettings.usePeriod = "10mm";
                chart.chartScrollbarSettings = scrollbarSettings;



                var cursorSettings = new AmCharts.ChartCursorSettings();
                cursorSettings.valueBalloonsEnabled = true;
                chart.chartCursorSettings = cursorSettings;


                // PERIOD SELECTOR ///////////////////////////////////
                var periodSelector = new AmCharts.PeriodSelector();
                periodSelector.periods = [{
                    period: "hh",
                    count: 24,
                    label: "ddd"
                }, {
                    period: "hh",
                    count: 48,
                    label: "dd"
                }, {
                    period: "hh",
                    count: 120,
                    label: "ddd"
                }, {
                    period: "hh",
                    count: 240,
                    label: "dia"
                }, {
                    period: "MAX",
                    label: "MAX"
                }];
                chart.periodSelector = periodSelector;

                var panelsSettings = new AmCharts.PanelsSettings();
                panelsSettings.usePrefixes = true;
                chart.panelsSettings = panelsSettings;

                // DATA SET SELECTOR
                var dataSetSelector = new AmCharts.DataSetSelector();
                dataSetSelector.position = "left";
                chart.dataSetSelector = dataSetSelector;



                chart.write('chartdiv');
            }
  }

json 文件“jsonlistdisp.php”结果：

[
 {
  "id": "1",
  "name": "dispositivo 1",
  "desc": "dispositivo"
 },
 {
  "id": "2",
  "name": "dispositivo 2",
  "desc": "dispositivo"
 }
]

和 json 文件“jsonvaluedisp.php”结果：

[
 {
  "date": "2013,08,19",
  "hour": "15,17,51,0",
  "value": "0.393000",
  "volume": "0.393000"
 },
 {
  "date": "2013,08,19",
  "hour": "15,30,01,0",
  "value": "0.393000",
  "volume": "0.393000"
 }
]

我不知道问题是日期格式还是问题所在，当我测试这段代码时，我什么也没看到。

有人知道问题是怎么回事？谢谢

4

1 回答 1

0

尝试为图表设置日期格式：

chart.dataDateFormat = "YYYY,MM,DD";

请注意，您应该使用 v3.X 才能使其正常工作。

如果这没有帮助，如果我想看看你如何构建图表，我可以提供帮助。

于 2013-10-24T05:42:51.843 回答