0

折れ線グラフでjson作業する必要があるこれがあります。amCharts

        var chartData = [{
            date: "2009/10/2",
            value: 5,
            name: 5
        }, {
            date: "2009/10/3",
            value: 15,
            name: 5

        }, {
            date: "2009/10/4",
            value: 13,
            name: 10
        }, {
            date: "2009/10/5",
            value: 17,
            name: 30
        }, {
            date: "2009/10/6",
            value: 15,
            name: 5
        }, {
            date: "2009/10/7",
            value: 19,
            name: 5
        }];

互換性を保つためにamCharts、日付値をDateオブジェクトとして割り当てる必要があるため、次の関数を使用しました。

        function parseDate(){

            for( var i = 0; i < chartData.length; ++i ) {
                var dateArray = chartData[i]["date"].split("/");

                chartData[i]["date"] =  new Date(Number(dateArray[0]), Number(dateArray[1])-1, Number(dateArray[2]));
                window.alert(chartData[i]["date"]);//for debugging purposes
            }
            return chartData;
        }

しかし、それでも私は線のない空のグラフを取得します.. :(しかし、次のようにjsonをハードコーディングすると、

        var chartData = [{
            date: new Date(2009, 10, 2),
            value: 5,
            name: 5
        }, {
            date: new Date(2009, 10, 3),
            value: 15,
            name: 5

        }, {
            date: new Date(2009, 10, 4),
            value: 13,
            name: 10
        }, {
            date: new Date(2009, 10, 5),
            value: 17,
            name: 30
        }, {
            date: new Date(2009, 10, 6),
            value: 15,
            name: 5
        }, {
            date: new Date(2009, 10, 7),
            value: 19,
            name: 5
        }];

チャートが表示されます、これで私を助けてください。

どうもありがとうございます ：）

編集：グラフを生成するためのコード（FYI）

        AmCharts.ready(function () {

            parseDate();

            // SERIAL CHART    
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "../amcharts/images/";
            chart.zoomOutButton = {
                backgroundColor: '#000000',
                backgroundAlpha: 0.15
            };
            chart.dataProvider = chartData;
            chart.categoryField = "date";

            // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
            chart.addListener("dataUpdated", zoomChart);

            // AXES
            // category                
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
            categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
            categoryAxis.dashLength = 2;
            categoryAxis.gridAlpha = 0.15;
            categoryAxis.axisColor = "#DADADA";


            var i = 0;
            for (var key in chartData[0]) {
                if (key != 'date') {
                    var valueAxis = new AmCharts.ValueAxis();
                    valueAxis.offset = i * 40;
                    valueAxis.dashLength = 4;
                    valueAxis.axisColor = "#FF6600";
                    valueAxis.axisAlpha = 0;
                    chart.addValueAxis(valueAxis);

                    // GRAPH
                    var graph = new AmCharts.AmGraph();
                    graph.valueAxis = valueAxis; // we have to indicate which value axis should be used
                    graph.type = "line";
                    graph.title = "infection # " + i;
                    graph.valueField = key;

                    graph.customBullet = "images/star.gif"; // bullet for all data points
                    graph.bulletSize = 14; // bullet image should be a rectangle (width = height)
                    graph.customBulletField = "customBullet"; // this will make the graph to display custom bullet (red star)
                    chart.addGraph(graph);
                }
                i = i + 1;
            }


            // CURSOR
            var chartCursor = new AmCharts.ChartCursor();
            chartCursor.cursorPosition = "mouse";
            chart.addChartCursor(chartCursor);

            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chart.addChartScrollbar(chartScrollbar);

            // LEGEND
            var legend = new AmCharts.AmLegend();
            legend.marginLeft = 110;
            chart.addLegend(legend);

            // WRITE
            chart.write("chartdiv");
        });
4

1 に答える 1

2

これを試して：

function parseDate() {
  for( var i = 0; i < chartData.length; ++i )
    chartData[i]["date"] =  new Date(chartData[i]["date"]);
  return chartData;
}
于 2012-11-02T08:38:31.457 に答える