根据时间表将数组值更新为图表 - javascript [英] Update array values to chart based on timeframe - javascript

问题描述

目前图表正在更新所有值。

现在我需要更新图表

• 3个月
  
• 6个月


• 9个月


• 12个月


• 15个月
  
• 18个月
li>

如何在javascript或jquery中做到这一点？

我已经创建了小提琴解释我的情况

http：// jsfiddle.net/Yq3DW/97/

这是html

 < select id =SelectPeriod> 
< option value =last3Months>过去3个月< / option> 
< option value =last6Months>过去6个月< / option> 
< option value =last9Months>过去9个月< / option> 
< option value =last12Months>过去12个月< / option> 
< option value =last15Months>过去15个月< / option> 
< option value =last18Months>过去18个月< / option> 
< option value =last24Months>过去24个月< / option> 
< / select> 
 
< div id =chart>< / div> 
  

JS

  var calculation = [[实际值，目标值]]，
结果= [[100,190]，[115,190]，[250,190]，[23,190]，[190 [190,190]，[170,190]，[170,190]，
 [100,190]，[115,190]，[250,190]，[23,190]，[190,190]，
 [115,190]，[250,190]，[23,190]，[190,190]，[170,190]，[100,190]，[115,190]，
 [250,190]，[23,190]， [190，190]，[170,190]]; 
 
 calculation = calculation.concat（result.sort（function（a，b）{}））; 
 var chart = c3.generate（{
 bindto：'#chart'，
 data：{
 rows：calculation，
 type：'bar'，
} 
}）; 
  

这是我的定制，尝试

<$ p $（$＃$）$（$＃$）$ c3.generate（{
data：{
rows：calculation
}
}）;
}）;

详细解释

我需要根据时间范围更新图表。

如果用户选择6个月下拉列表，我只需要显示6个月的图表。

目前整个24个月都在更新。

现在我需要对数据进行分类。

如何在javascript或jquery中做到这一点？
请帮助我。

任何帮助表示赞赏

解决方案

<请参阅 http://jsfiddle.net/Yq3DW/99/

我更改了选项的值，以指示每个应显示多少个月以及更改事件I slice 原始数组。我使用 + 1 将第3，第6等项目包含在数组中。

  $（＃SelectPeriod）。change（function（evt）{
 var chartSelection = $（＃SelectPeriod）。val（）; 
 var chart = c3.generate {
 data：{
 rows：calculation.slice（0，parseInt（chartSelection）+ 1），
 type：'bar'
} 
}）; 
}）; 
  

I need to update the chart based on time period.

currently chart is updating all values.

Now i need to update the chart by

• 3 months
• 6 months
• 9 months
• 12 months
• 15 months
• 18 months

how to do in javascript or jquery.??

i have created fiddle to explain my situation

http://jsfiddle.net/Yq3DW/97/

this is the html

<select id="SelectPeriod" >
    <option value="last3Months">Last 3 months</option>
    <option value="last6Months">Last 6 months</option>
    <option value="last9Months">Last 9 months</option>
    <option value="last12Months">Last 12 months</option>
    <option value="last15Months">Last 15 months</option>
    <option value="last18Months">Last 18 months</option>
    <option value="last24Months">Last 24 months</option>
</select>

<div id="chart"></div>

JS

     var calculation = [["Actual value","Targeted value"]],
    result = [[100, 190],[115,190],[250, 190],[23,190],[190, 190],[170,190],
[100, 190],[115,190],[250, 190],[23,190],[190, 190],[170,190],[100, 190],
[115,190],[250, 190],[23,190],[190, 190],[170,190],[100, 190],[115,190],
[250, 190],[23,190],[190, 190],[170,190]];  

    calculation = calculation.concat(result.sort(function (a, b) {  }));
    var chart = c3.generate({
        bindto: '#chart',
        data: {
            rows: calculation,
            type: 'bar',
        }
    });   

this is my customisation , trying

$("#SelectPeriod").change(function (evt) {
    var chartSelection = $("#SelectPeriod").val();
    var chart = c3.generate({
        data: {
            rows: calculation
        }
    });
});

in detail explanation

I need to update the charts based on time frame.

If user selects 6 months dropdown, i need to show only 6 months chart.

currently it is updating whole 24 months.

Now i need to categorise the data.

How to do it in javascript or jquery?? please help me.

Any help is appreciated

解决方案

See http://jsfiddle.net/Yq3DW/99/

I changed the value of options to indicate how many months each should show and in the change event I slice the original array. I use + 1 to include the 3rd, 6th, etc. item in the array.

$("#SelectPeriod").change(function (evt) {
    var chartSelection = $("#SelectPeriod").val();
    var chart = c3.generate({
        data: {
            rows: calculation.slice(0, parseInt(chartSelection) + 1),
            type:'bar'
        }
    });
});

这篇关于根据时间表将数组值更新为图表 - javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！