Javascript 角度-动态构建JSON以与ChartList一起使用

我有一个爱奥尼亚项目，正在使用以下库：

实际绘制图表是通过以下步骤实现的：

var chart = new Chartist.Line('.ct-chart', {
  series: [
{
  name: 'series-1',
  data: [
    {x: new Date(143134652600), y: 53},
    {x: new Date(143234652600), y: 40},
    {x: new Date(143340052600), y: 45},
    {x: new Date(143366652600), y: 40},
    {x: new Date(143410652600), y: 20},
    {x: new Date(143508652600), y: 32},
    {x: new Date(143569652600), y: 18},
    {x: new Date(143579652600), y: 11}
  ]
},
{
  name: 'series-2',
  data: [
    {x: new Date(143134652600), y: 53},
    {x: new Date(143234652600), y: 35},
    {x: new Date(143334652600), y: 30},
    {x: new Date(143384652600), y: 30},
    {x: new Date(143568652600), y: 10}
  ]
}
 ]
  }, {
axisX: {
type: Chartist.FixedScaleAxis,
divisor: 5,
labelInterpolationFnc: function(value) {
  return moment(value).format('MMM D');
}
}
});

带DIV：

  <div class="ct-chart ct-perfect-fourth"></div>

我希望通过一个函数调用动态地构建这个数组，而不是像上面所示的那样为该系列使用硬编码数组

有没有我可以这样做的例子

---

谢谢

这是一个粗略的例子；您可以将输入的

series1

，

series2

替换为数组数组，并将较低的循环设置为两个包裹的循环，以处理多个系列。这还需要将对象添加到外部循环中的序列数组中

现在，请尝试以下方法：

function generateJSON(series1, series2) {
  var chartInternal = {
    series: [
      {
      name: 'series-1',
      data: []
      },
      {
      name: 'series-2',
      data: []
      }
      ]
    }, {
      axisX: {
        type: Chartist.FixedScaleAxis,
        divisor: 5,
        labelInterpolationFnc: function(value) {
          return moment(value).format('MMM D');
        }
      }
    };

  for (var i = 0, len = series1.length; i < len; i++) {
    chartInternal.series[0].data.push({x: new Date(series1[i].date), y: series1[i].y});
  }
  for (var i = 0, len = series2.length; i < len; i++) {
    chartInternal.series[1].data.push({x: new Date(series2[i].date), y: series2[i].y});
  }
  return chartInternal;
}

---

您可以使用一个生成函数生成带有一点随机性和一些固定变量的数据。最好将图表的创建参数化，以便以后更容易重新创建。ChartList还有一个函数，可以让您将新的数据和选项传递给它，因此对于这一点特别有用

Javascript

var button = document.getElementById('button');
var options = {
    axisX: {
        type: Chartist.FixedScaleAxis,
        divisor: 5,
        labelInterpolationFnc: function(value) {
          return moment(value).format('MMM D');
        }
    }
};
var chart; // initialise the chart variable

function createChart(){
    chart = new Chartist.Line('.ct-chart', changeData(), options);
}

function updateChart(){
    chart.update(changeData());
}

function changeData(){
    var series = [];
    // set up series ranges
    var numberOfSeries = 2;
    var numberOfItems = 8;
    var startDate = 143134652600;
    var endDate = 143579652600;
    var minY = 11;
    var maxY = 53;
    // creates the 'step' each x-axis item should take
    var dateDiff = Math.floor((endDate - startDate) / numberOfItems);
    // alternatively set the step to a whole day etc. (makes endDate unnecessary)
    // var dateDiff = 24 * 60 * 60 * 1000;

    for(var x = 0; x < numberOfSeries; x++){
        var seriesData = [];
        for(var y = 0; y < numberOfItems; y++){
            seriesData.push({
                x: new Date(startDate + (dateDiff*y)),
                y: getRandomInt(minY, maxY)
            })
        }
        series.push({
            name: 'series-'+ (x+1),
            data: seriesData
        });
    }
    // return the data to display in the chart
    return {series:series};
}

/**
 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

button.addEventListener('click', updateChart);

createChart(); // generate chart initially

var-button=document.getElementById（'button'）；
变量选项={
axisX：{
类型：ChartList.FixedScaleAxis，
除数：5，
labelInterpolationFnc:函数（值）{
返回力矩（值）。格式（'MMM D'）；
}
}
};
var图表；//初始化图表变量
函数createChart（）{
chart=新的charlist.Line（'.ct chart'，changeData（），options）；
}
函数updateChart（）{
更新（changeData（））；
}
函数changeData（）{
var系列=[]；
//设置系列范围
var numberOfSeries=2；
var numberOfItems=8；
var startDate=143134652600；
var endDate=143579652600；
var-minY=11；
var-maxY=53；
//创建每个x轴项目应采取的“步骤”
var dateDiff=数学楼层（（结束日期-开始日期）/项目数量）；
//或者将步骤设置为一整天等（不需要结束日期）
//var dateDiff=24*60*60*1000；
对于（var x=0；x

HTML

<button id="button">
Change Data
</button>
<div class="ct-chart ct-perfect-fourth"></div>

更改数据

<button id="button">
Change Data
</button>
<div class="ct-chart ct-perfect-fourth"></div>