无法让amCharts WordPress数据加载器工作

时间:2015-12-30 12:25:55

标签: wordpress amcharts

我正在尝试使用WordPress中amCharts的Data Loader,但我没有成功。我从一个默认的Stock Chart开始,用github网站中的一个替换JS数据集结构。然后我更改相应的字段值,但我总是得到一个空站点。我在同一台服务器上使用CSV文件,以确保它不能访问外部源问题。

有人可能有完整的代码吗?

到目前为止,这是我的工作代码:

var chart = AmCharts.makeChart("chartdiv", {
      "type": "stock",
      "color": "#fff",
      "dataSets": [{
      "title": "MSFT",
        "fieldMappings": [{
          "fromField": "Open",
          "toField": "open"
        }, {
          "fromField": "High",
          "toField": "high"
        }, {
          "fromField": "Low",
          "toField": "low"
        }, {
          "fromField": "Close",
          "toField": "close"
        }, {
          "fromField": "Volume",
          "toField": "volume"
        }],
        "compared": false,
        "categoryField": "Date",
        /**
         * data loader for data set data
         */
        "dataLoader": {
          "url": "uploads/2015/12/table.csv",
          "format": "csv",
          "showCurtain": true,
          "showErrors": true,
          "async": true,
          "reverse": true,
          "delimiter": ",",
          "useColumnNames": true
       },

      }],
      //"dataDateFormat": "YYYY-MM-DD",
      "panels": [{
          "title": "Value",
          "percentHeight": 70,
          "stockGraphs": [{
            "type": "candlestick",
            "id": "g1",
            "openField": "open",
            "closeField": "close",
            "highField": "high",
            "lowField": "low",
            "valueField": "close",
            "lineColor": "#fff",
            "fillColors": "#fff",
            "negativeLineColor": "#db4c3c",
            "negativeFillColors": "#db4c3c",
            "fillAlphas": 1,
            "comparedGraphLineThickness": 2,
            "columnWidth": 0.7,
            "useDataSetColors": false,
            "comparable": true,
            "compareField": "close",
            "showBalloon": false,
            "proCandlesticks": true
          }],
          "stockLegend": {
            "valueTextRegular": undefined,
            "periodValueTextComparing": "[[percents.value.close]]%"
          }
        },
        {
          "title": "Volume",
          "percentHeight": 30,
          "marginTop": 1,
          "columnWidth": 0.6,
          "showCategoryAxis": false,
          "stockGraphs": [{
            "valueField": "volume",
            "openField": "open",
            "type": "column",
            "showBalloon": false,
            "fillAlphas": 1,
            "lineColor": "#fff",
            "fillColors": "#fff",
            "negativeLineColor": "#db4c3c",
            "negativeFillColors": "#db4c3c",
            "useDataSetColors": false
          }],
          "stockLegend": {
            "markerType": "none",
            "markerSize": 0,
            "labelText": "",
            "periodValueTextRegular": "[[value.close]]"
          },
          "valueAxes": [{
            "usePrefixes": true
          }]
        }
      ],
      panelsSettings: {
        color: "#fff",
        plotAreaFillColors: "#333",
        plotAreaFillAlphas: 1,
        marginLeft: 60,
        marginTop: 5,
        marginBottom: 5
      },
      chartScrollbarSettings: {
        graph: "g1",
        graphType: "line",
        usePeriod: "WW",
        backgroundColor: "#333",
        graphFillColor: "#666",
        graphFillAlpha: 0.5,
        gridColor: "#555",
        gridAlpha: 1,
        selectedBackgroundColor: "#444",
        selectedGraphFillAlpha: 1
      },
      categoryAxesSettings: {
        equalSpacing: true,
        gridColor: "#555",
        gridAlpha: 1
      },
      valueAxesSettings: {
        gridColor: "#555",
        gridAlpha: 1,
        inside: false,
        showLastLabel: true
      },
      chartCursorSettings: {
        pan: true,
        valueLineEnabled: true,
        valueLineBalloonEnabled: true
      },
      legendSettings: {
        color: "#fff"
      },
      stockEventsSettings: {
        showAt: "high",
        type: "pin"
      },
      balloon: {
        textAlign: "left",
        offsetY: 10
      },
      periodSelector: {
        position: "bottom",
        periods: [{
          period: "DD",
          count: 10,
          label: "10D"
        }, {
          period: "MM",
          count: 1,
          label: "1M"
        }, {
          period: "MM",
          count: 6,
          label: "6M"
        }, {
          period: "YYYY",
          count: 1,
          label: "1Y"
        }, {
          period: "YYYY",
          count: 2,
          selected: true,
          label: "2Y"
        }, {
          period: "YTD",
          label: "YTD"
        }, {
          period: "MAX",
          label: "MAX"
        }]
      }
    });
}

0 个答案:

没有答案