Question

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

 $('#print').click(function () {
        var doc = new jsPDF();
        var chartHeight = 80;
        doc.setFontSize(15);
        doc.text(35, 25, "Prospect Report Graph");
         $('.myChart').each(function (index) {
            var imageData = $(this).highcharts().createCanvas();
            doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
           });
         doc.save('reports_graph.pdf');     
    });

json结果如下

<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>

Am getting following result like below image

But I want result like below second image

Answer 1

您可以在数据集定义中使用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'
} ]

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

Answer 2

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

以下是我从examples on github之一得到的一个例子：

postProcess

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

2 个答案: