javascript – 无法在amcharts的stockevents中分配json数据

我正在尝试使用Data Loader显示amCharts Stock Chart.一切都运作良好.现在我想使用
AJAX显示股票事件,但无法找到如何做的线索.绘制图表的
JavaScript代码:

<script>

    var chartData = [];
    generateChartData();

    function generateChartData() {
        var firstDate = new Date(2012, 0, 1);
        firstDate.setDate(firstDate.getDate() - 500);
        firstDate.setHours(0, 0, 0, 0);

        for (var i = 0; i < 500; i++) {
            var newDate = new Date(firstDate);
            newDate.setDate(newDate.getDate() + i);

            var a = Math.round(Math.random() * (40 + i)) + 100 + i;
            var b = Math.round(Math.random() * 100000000);

            chartData.push({
                date: newDate,
                value: a,
                volume: b
            });
        }
    }   

  AmCharts.makeChart("chartdiv", {
        type: "stock",
            "export": {
              "enabled": true,
              "menu": [ {
                "class": "export-main",
                "menu": [ {
                  "label": "Download as image",
                  "menu": [ "PNG", "JPG", "SVG" ]
                }, {
                  "label": "Download data",
                  "menu": [ "CSV", "XLSX" ]
                }, {
                  "format": "PRINT",
                   "label": "Print Chart"
                } ]
              } ]
            },

            "theme": "light",
            "fontFamily": 'Open Sans',
            "color":    '#888',
        dataSets: [
          {
               title: "MSFT",
              color: "#b0de09",
            fieldMappings: [{
              fromField: 'value',
              toField: 'value'
            }],
            dataLoader: {
              "url": "data.php",
                "format": "json",
                "showCurtain": true,
                "showErrors": true,
                "async": true,
                "reverse": true,
                "delimiter": ",",
                "useColumnNames": true
            },
            compared : true,
            categoryField: 'date'
          },
        ],
        panels: [{
                title: "Value",
                percentHeight: 70,

                stockGraphs: [{
                    id: "g1",
                    valueField: "value"
                }],

                stockLegend: {
                    valueTextRegular: " ",
                    markerType: "none"
                }
            }],
                chartScrollbarSettings: {
                graph: "g1"
            },

            chartCursorSettings: {
                valueBalloonsEnabled: true,
                graphBulletSize: 1,
                valueLineEnabled:true,
                valueLineBalloonEnabled:true
            },



            periodSelector: {
                periods: [{
                    period: "DD",
                    count: 10,
                    label: "10 days"
                }, {
                    period: "MM",
                    count: 1,
                    label: "1 month"
                }, {
                    period: "YYYY",
                    count: 1,
                    label: "1 year"
                }, {
                    period: "YTD",
                    label: "YTD"
                }, {
                    period: "MAX",
                    label: "MAX"
                }]
            },

            panelsSettings: {
                mouseWheelZoomEnabled:true,
                usePrefixes: true
            }
      });
</script>

json的结果如下

[{"date":"2013-08-24","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-25","type":"text","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-26","type":"text","graph":"g1","backgroundColor":"#85CDE6","value":"531","description":"This is description of an event"},{"date":"2013-08-27","type":"flag","graph":"g1","backgroundColor":"#00CC00","value":"333","description":"This is description of an event"},{"date":"2013-08-28","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"552","description":"This is description of an event"},{"date":"2013-08-29","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"492","description":"This is description of an event"},{"date":"2013-08-30","type":"sign","graph":"g1","backgroundColor":"#85CDE6","value":"379","description":"This is description of an event"},{"date":"2013-08-31","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"767","description":"This is description of an event"},{"date":"2013-09-01","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"169","description":"This is description of an event"},{"date":"2013-09-02","type":"text","graph":"g1","backgroundColor":"#FFFFFF","value":"314","description":"This is description of an event"},{"date":"2013-09-03","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"437","description":"This is description of an event"}]

Am getting following result like below image

But I want result like below second image

最佳答案 您可以在数据集定义中使用
eventDataLoader块,其方式与使用dataLoader加载图表数据的方式完全相同.

即:

dataSets: [ {
  title: "MSFT",
  color: "#b0de09",
  fieldMappings: [{
    fromField: 'value',
    toField: 'value'
  }],
  dataLoader: {
    "url": "data.php",
    "format": "json",
    "showCurtain": true,
    "showErrors": true,
    "async": true
  },
  eventDataLoader: {
    "url": "events.php",
    "format": "json",
    "showCurtain": true,
    "showErrors": true,
    "async": true
  },
  compared : true,
  categoryField: 'date'
} ]

请注意,我删除了reverse,delimiter和useColumnNames参数,因为它们与JSON格式无关.

点赞