jQuery graph, chart custmization as per the inputs is not working

前端未结

关注

 1  1867

Hi recently i tried Morris Area Charts , and it is good one . But the thing its difficult to understand how the data is fetched there .

I have seen the document ht

相关标签:

1条回答

不要未来只要你来

2020-12-07 06:25

The function getData just transforms the original data into the right format so that there is no format-conflict with the current morris-chart-configuration (xkey, ykeys).

Although the most interesting part are parseTime and xLabelFormat. By setting parseTime false you tell this lib that you want the data not to be transformed into Date-objects. So you have more control of how to print the data onto the x-axis. Furthermore you can use xLabelFormat to actually print the data as you wish. In this examples the corresponding callback-function remembers the last currentYear-Number so that this number can be incremented by the next number.

function getData(sets) {
    var result = [];
    sets.forEach(function(set) {
        result.push({
            y: set.year.toString(),
            a: set.Initial,
            b: set.Initial + set.gain
        });
    });
    return result;
}

var data = getData([{
            Initial: 100,
            gain: 10,
            year: 1
        },
        {
            Initial: 100,
            gain: 25,
            year: 2
        },
        {
            Initial: 200,
            gain: 20,
            year: 1
        },
        {
            Initial: 1200,
            gain: 180,
            year: 1
        },
        {
            Initial: 1200,
            gain: 720,
            year: 3
        },
    ]),
    config = {
        data: data,
        xkey: 'y',
        parseTime: false,
        xLabelFormat: function(y) {
            this.currentYear = this.currentYear ? (+this.currentYear) + (+y.label) : y.label;
            return this.currentYear;
        },
        ykeys: ['a', 'b'],
        labels: ['Total Income', 'Total Outcome'],
        fillOpacity: 0.6,
        hideHover: 'auto',
        behaveLikeLine: true,
        resize: true,
        pointFillColors: ['#ffffff'],
        pointStrokeColors: ['black'],
        lineColors: ['gray', 'red']
    };
config.element = 'area-chart';
Morris.Area(config);

#area-chart{
      min-height: 250px;
    }

<head>
    <meta charset=utf-8 />
    <title>Morris.js Area Chart</title>
    </head>
    <body>
      <h3 class="text-primary text-center">
        Morris js charts
      </h3>
      <div class"row">
        <div class="col-sm-12 text-center">
          <label class="label label-success">Area Chart</label>
          <div id="area-chart" ></div>
        </div>
        
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
        
        
        
      </div>
    </body>

P.s. I actually have made a function (getData) to build the data in the right format so that it does not conflict with the chart-configuration. So when you want to change the chart-config you have to change getData as well.

I have also provided a fiddle to show of how you can still zoom into this morris-chart by taking advantage of resize-events. In this example the chart will split up into two charts when you zoom in.

0 讨论(0)