输入文件到morris图表-json文件到json变量

时间:2018-07-21 14:06:59

标签: jquery json charts morris.js

我正在使用morris图表,它具有图表的硬编码值。我想将一个文件分配给data变量。下面是代码。

! function($) {
  "use strict";

  var Dashboard = function() {};

  //creates line chart
  Dashboard.prototype.createLineChart = function(element, data, xkey, ykeys, labels, opacity, Pfillcolor, Pstockcolor, lineColors) {
      Morris.Line({
        element: element,
        data: data,
        xkey: xkey,
        ykeys: ykeys,
        labels: labels,
        fillOpacity: opacity,
        pointFillColors: Pfillcolor,
        pointStrokeColors: Pstockcolor,
        behaveLikeLine: true,
        gridLineColor: '#eef0f2',
        hideHover: 'auto',
        lineWidth: '3px',
        pointSize: 0,
        preUnits: '$',
        resize: true, //defaulted to true
        lineColors: lineColors
      });
    },

    Dashboard.prototype.init = function() {

      //create line chart
      var $data = [{
          y: '2008',
          a: 50,
          b: 0
        },
        {
          y: '2009',
          a: 75,
          b: 50
        },
        {
          y: '2010',
          a: 30,
          b: 80
        },
        {
          y: '2011',
          a: 50,
          b: 50
        },
        {
          y: '2012',
          a: 75,
          b: 10
        },
        {
          y: '2013',
          a: 50,
          b: 40
        },
        {
          y: '2014',
          a: 75,
          b: 50
        },
        {
          y: '2015',
          a: 100,
          b: 70
        }
      ];

      alert($data);
      /*$.getJSON('lenovo_json_rep1.json')
        .done(function (data) {
        var $data = data;
        });
      */

      /*$.get('lenovo_json_rep1.json', function(result) {
            $data = JSON.stringify(result);             
            console.log(JSON.stringify(result));
      });*/

      this.createLineChart('dashboard-line-chart', $data, 'y', ['a', 'b'], ['Contacts', 'Completes'], ['0.1'], ['#ffffff'], ['#999999'], ['#458bc4', '#23b195']);

    },
    //init
    $.Dashboard = new Dashboard, $.Dashboard.Constructor = Dashboard
}(window.jQuery),

//initializing
function($) {
  "use strict";
  $.Dashboard.init();
}(window.jQuery);

无法将文件值分配给$ data变量。 我正在尝试

$.get("lenovo_json_rep1.json", function( data1 ) {}

$.get("lenovo_json_rep1.txt", function( data1 ) {}

如果我使用.getJSON,它仅读取txt文件,而不读取JSON文件。

我的输入文件是

[
{ y: '2008', a: 50, b: 0 },
{ y: '2009', a: 75, b: 50 },
{ y: '2010', a: 30, b: 80 },
{ y: '2011', a: 50, b: 50 },
{ y: '2012', a: 75, b: 10 },
{ y: '2013', a: 50, b: 40 },
{ y: '2014', a: 75, b: 50 },
{ y: '2015', a: 100, b: 70 }
]

需要帮助将这些值从文件分配给$data变量,以便可以动态更改数据。

我尝试使用.get.getJSON-仅读取txt文件。 如果输入文件为.json,则代码不会读取该文件。

来自.txt文件的值用双引号引起来,因此无法作为json数据传递。 我尝试将其转换为json数据,但无法正常工作。 在实际代码中,如果我提醒$ data变量,它将显示 作为对象对象对象对象。

不确定如何将文件输入传递给json格式的json变量。

0 个答案:

没有答案