4

我正在尝试使用数据加载器显示 amCharts 股票图表。一切运作良好。现在我想使用 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"}]

得到如下结果，如下图

但我想要如下第二张图片的结果

4

2 回答 2

1

您可以在数据集定义中使用块，其方式与加载图表数据eventDataLoader的方式完全相同。dataLoader

IE：

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'
} ]

请注意，我删除了reversed、delimiter和useColumnNames参数，因为它们与 JSON 格式无关。

于 2015-10-15T10:02:20.813 回答
0

@martynasma 是对的，但您可以使用它postProcess来进一步处理收到的事件数据。

这是我从他们在 github 上的一个示例中获得的示例：

"eventDataLoader": {
          "url": "data/MSFT_events.csv",
          "format": "csv",
          "showCurtain": true,
          "showErrors": true,
          "async": true,
          "reverse": true,
          "delimiter": ",",
          "useColumnNames": true,
          "postProcess": function ( data ) {
            for ( var x in data ) {
              switch( data[x].Type ) {
                case 'A':
                  var color = "#85CDE6";
                  break;
                default:
                  var color = "#cccccc";
                  break;
              }
              data[x].Description = data[x].Description.replace( "Upgrade", "<strong style=\"color: #0c0\">Upgrade</strong>" ).replace( "Downgrade", "<strong style=\"color: #c00\">Downgrade</strong>" );
              data[x] = {
                type: "pin",
                graph: "g1",
                backgroundColor: color,
                date: data[x].Date,
                text: data[x].Type,
                description: "<strong>" + data[x].Title + "</strong><br />" + data[x].Description
              };
            }
            return data;
          }
       }
于 2016-09-06T16:54:38.680 回答