Question

我是处理线图的json数据的新手。我有数据显示每日和每月的折线图。我想将“每日”的json数据重新排列为“过去7天”和“过去4周”。同样，“每月”数据分别指向“过去6个月”和“过去12个月”

当用户选择“过去7天” =>时，我想将JSON数据切片/调整为每日数据的每个（成功计数，错误计数，日期）的最后7个项目。例如：

$elm['datesDAILY']=["2019-04-06","2019-04-07","2019-04-08","2019-04-09","2019-04-10","2019-04-11","2019-04-12"]

当用户选择“过去4周”时=>我想通过跳过DAILY数据的每个（成功计数，错误计数，日期）中的替代项来切片/调整json数据的大小。例如：

$elm['datesDAILY']=["2019-03-29","2019-03-31","2019-04-02","2019-04-04","2019-04-06","2019-04-08","2019-04-10","2019-04-12"]

如何实现这种调整json数据大小的方法？有人可以分享您的经验吗？

这些是我实际的json数据：（数组数据在PHP文件中转换为json）

$elm['successcountDAILY'] =  ["211","490","193","148","158","91","119","92","102","106","105","97","158","99","95","24"]

$elm['errorcountDAILY'] = ["189","325","37","16","32","13","21","16","12","17","11","13","21","13","20","1"]

$elm['datesDAILY']=["2019-03-28","2019-03-29","2019-03-30","2019-03-31","2019-04-01","2019-04-02","2019-04-03","2019-04-04","2019-04-05","2019-04-06","2019-04-07","2019-04-08","2019-04-09","2019-04-10","2019-04-11","2019-04-12"]

$elm['successcountMONTHLY'] =  ["1042","1246"]

$elm['errorcountMONTHLY'] = ["567","190"]

$elm['datesMONTHLY'] = ["2019-03-01","2019-04-01"]

html：

 <div class="ibox-title">
    <div class="row">
        <div class="col-md-4">
        <strong>Number of queries over time</strong>
        </div>
        <div class="col-md-8 text-right">
        <span>
            <a id="7days">last 7 days</a>
        </span>
        |
        <span>
            <a id="4weeks">last 4 weeks</a>
        </span>
        |
        <span>
            <a id="6months">last 6 months</a>
        </span>
        |
        <span>
            <a id="12months">last 12 months</a>
        </span>
        </div>
    </div>
</div>

<div>
 <canvas id="line-chart" width="800" height="450"></canvas>
</div>

javascript：

<script>

$(document).ready(function () {

var canvas = document.getElementById("line-chart");
var ctx = canvas.getContext('2d');
<!-- DAILY is default -->
var lab = {$elm['datesDAILY']};
var suc = {$elm['successcountDAILY']};
var err = {$elm['errorcountDAILY']};

var data = {
  labels: lab,
    datasets: [{ 
        data: suc, 
        label: "Success",
        borderColor: "#3cba9f",
        fill: false
      }, 
      { 
        data: err, 
        label: "Error",
        borderColor: "#c45850",
        fill: false
      }
    ]
};

var options = {
  scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                     display: true,
                     labelString: 'Queries',
                     fontSize: 20 
                  }
            }]            
        }  
};
<!-- graph declaration: -->
var mylineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});


<!--7days and 4 weeks-->
$('#7days,#4weeks').click(function(ev) {
    ev.preventDefault();
    mylineChart.data.labels = {$elm['datesDAILY']};
    mylineChart.data.datasets[0].data ={$elm['successcountDAILY']};
    mylineChart.data.datasets[1].data ={$elm['errorcountDAILY']};
    <!--update chart with new values-->
    mylineChart.update();
});


<!--Monthly-->
$('#6months,#12months').click(function(ev) {
    ev.preventDefault();
    mylineChart.data.labels = {$elm['datesMONTHLY']};
    mylineChart.data.datasets[0].data ={$elm['successcountMONTHLY']};
    mylineChart.data.datasets[1].data ={$elm['errorcountMONTHLY']};
    <!--update chart with new values-->
    mylineChart.update();
});


<!--accordion-->
$("#accordion").accordion({
    <!--allows the accordion panels to keep their native height-->
    heightStyle: "content"
});




} );
</script>

如何根据选定的期间为折线图调整json数据的大小

0 个答案: