有什么方法可以访问/控制json中的项目?

时间:2019-04-24 09:13:45

标签: javascript json amcharts

我正在尝试使用console.log来访问图表中所示的总和,但是我无法访问该行"periodValueText": "Total: [[value.sum]]",我尝试使用"var item":"[[value.sum]]"进行设置但这没用,请帮忙

var chartData1 = [];

generateChartData();

function generateChartData() {
  var firstDate = new Date();
  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 a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;


    chartData1.push({
      "date": newDate,
      "value": a1,
      "volume": b1
    });
  }
}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "extendToFullPeriod": false,

  "dataSets": [{
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],
      "dataProvider": chartData1,
      "categoryField": "date"
    }
  ],

  "panels": [{

      "showCategoryAxis": false,
      "stockGraphs": [{
        "id": "g1",

        "valueField": "value",
        "comparable": true,

      }],

      "stockLegend": {
        "periodValueText": "Total: [[value.sum]]"
      }
    }
  ],

  "periodSelector": {
    "position": "left",
    "periods": []
  },

  "dataSetSelector": {
    "position": "left"
  }
});

chart.addListener('rendered', function(event) {
  var dataProvider = chart.dataSets[0].dataProvider;
  $(".amChartsPeriodSelector .amChartsInputField").datepicker({
    "dateFormat": "dd-mm-yy",
    "minDate": dataProvider[0].date,
    "maxDate": dataProvider[dataProvider.length - 1].date,
    "onClose": function() {
      $(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
    }
  });
});
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: Verdana;
}

#chartdiv {
	width: 100%;
	height: 100%;
}
<!-- jQuery stuff -->
<link rel="stylesheet" media="all" href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<!-- amCharts -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

2 个答案:

答案 0 :(得分:0)

您需要先将整个JSON保存在变量中,然后才能访问该字段:

var data = {
  "type": "stock",
  "extendToFullPeriod": false,

  "dataSets": [{
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],
      "dataProvider": chartData1,
      "categoryField": "date"
    }
  ],

  "panels": [{

      "showCategoryAxis": false,
      "stockGraphs": [{
        "id": "g1",

        "valueField": "value",
        "comparable": true,

      }],

      "stockLegend": {
        "periodValueText": "Total: [[value.sum]]"
      }
    }
  ],

  "periodSelector": {
    "position": "left",
    "periods": []
  },

  "dataSetSelector": {
    "position": "left"
  }
};

var chart = AmCharts.makeChart("chartdiv", data);

console.log(data.panels[0].stockLegend.periodValueText);
// "Total: [[value.sum]]"

注意: [[value.sum]]在此代码中不会被扩展,它将是字符串内的文字文本。不确定应该是什么。

答案 1 :(得分:0)

var data = {
  "type": "stock",
  "extendToFullPeriod": false,

  "dataSets": [{
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],
      "dataProvider": chartData1,
      "categoryField": "date"
    }
  ],

  "panels": [{

      "showCategoryAxis": false,
      "stockGraphs": [{
        "id": "g1",

        "valueField": "value",
        "comparable": true,

      }],

      "stockLegend": {
        "periodValueText": "Total: [[value.sum]]"
      }
    }
  ],

  "periodSelector": {
    "position": "left",
    "periods": []
  },

  "dataSetSelector": {
    "position": "left"
  }
};

var chart = AmCharts.makeChart("chartdiv", data);

console.log(data.panels[0].stockLegend.periodValueText);
// "Total: [[value.sum]]"