从Zingchart中的CSV数据获取序列和值 [英] Getting series and values from CSV data in Zingchart

问题描述

在Zingchart中创建混合图表时，我们可以传递带有values数组的类型属性值。但我不知道什么时候从CSV中读取数据如何这可以实现。
我想在下面创建混合图表，但数据是从csv文件读取的。

 < script src =https：//cdn.zingchart。 com / zingchart.min.js>  

div>

解决方案

我使用您在

ZingChart包括基本图表的CSV解析器，但是更复杂的情况需要一些预处理以获取您需要的数据。我使用 PapaParse 进行此演示，但还有其他解析库可用。

这里是JavaScript。我在HTML中使用一个简单的文件输入来获取CSV。

  var csvData; 
 var limit = []，
 normal = []，
 excess = []，
 dates = []; 
 var myConfig = {
 theme：none，
type：mixed，
scale-x：{
items-overlap ：true，
max-items：9999，
 values：dates，
 guide：{
 visible：0 
}，
 item： 
 angle：45 
} 
}，
series：[{
type：bar，
values 
stack：true，
background-color：＃4372C1，
hover-state：{
visible：0 
} 
}，{
type：bar，
values：excess，
stacked：true，
background-color： ＃EB7D33，
hover-state：{
visible：0 
} 
}，{
type：line $ bvalues：limit 
}] 
}; 
 
 / *获取文件并使用PapaParse解析* / 
 function parseFile（e）{
 var file = e.target.files [0]; 
 Papa.parse（file，{
 delimiter：，，
 complete：function（results）{
 results.data.shift（）; //第一个数组标题值，我们不需要这些
 csvData = results.data; 
 prepChart（csvData）; 
} 
}）; 
} 
 
 / *处理来自PapaParse（d）CSV的结果并填充
 **每个图表序列和scale-x值的数组
 * / 
 function prepChart（data）{
 var excessVal; 
 
 // PapaParse数据在2d数组中
 for（var i = 0; i  
 //保存引用到你的超值
 //将所有数值转换为int（它们最初是字符串）
 var excessVal = parseInt（data [i] [4]）; 
 
 //日期，限制值和正常值都可以推送到它们的数组
 dates.push（data [i] [0]）; 
 limit.push（parseInt（data [i] [1]））; 
 normal.push（parseInt（data [i] [3]））; 
 
 / *如果这个节点没有超额，我们必须将一个空值推入过多的
 **系列
 * / 
 if（excessVal == 0 ）{
 excess.push（null）; 
} else {
 excess.push（excessVal）; 
} 
} 
 //渲染图表
 zingchart.render（{
 id：'myChart'，
 data：myConfig，
 height：500，
 width：725 
}）; 
} 
 $（document）.ready（function（）{
 $（'＃csv-file'）。change（parseFile）; 
} 
  

While creating mixed chart in Zingchart we can pass the type attribute values with values array. But I'm not sure when reading data from CSV how this can be achieved. I want to create mixed chart as on fiddle link below but data is to be read from a csv file.

  var myConfig = 
      {
      "type":"mixed",
      "series":[
        {
          "values":[51,53,47,60,48,52,75,52,55,47,60,48],
          "type":"bar",
          "hover-state":{
            "visible":0
          }
        },
        {
          "values":[69,68,54,48,70,74,98,70,72,68,49,69],
          "type":"line"
        }
      ]
    }
  zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 500, 
	width: 725 
});

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>

解决方案

I put together a demo for you using the sample data you provided in

ZingChart includes a CSV parser for basic charts, but a more complex case like this requires a bit of preprocessing to get your data where it needs to be. I used PapaParse for this demo, but there are other parsing libraries available.

Here's the JavaScript. I'm using a simple file input in the HTML to get the CSV.

var csvData;
var limit = [],
    normal = [],
    excess = [],
    dates = [];
var myConfig = {
    theme: "none",
    "type": "mixed",
    "scale-x": {
        "items-overlap":true,
        "max-items":9999,
        values: dates,
        guide: {
            visible: 0
        },
        item:{
            angle:45    
        } 
    },
    "series": [{
        "type": "bar",
        "values": normal,
        "stacked": true,
        "background-color": "#4372C1",
        "hover-state": {
            "visible": 0
        }
    }, {
        "type": "bar",
        "values": excess,
        "stacked": true,
        "background-color": "#EB7D33",
        "hover-state": {
            "visible": 0
        }
    }, {
        "type": "line",
        "values": limit
    }]
};

/* Get the file and parse with PapaParse */
function parseFile(e) {
    var file = e.target.files[0];
    Papa.parse(file, {
        delimiter: ",",
        complete: function(results) {
            results.data.shift(); //the first array is header values, we don't need these
            csvData = results.data;
            prepChart(csvData);
        }
    });
}

/* Process the results from the PapaParse(d) CSV and populate 
 ** the arrays for each chart series and scale-x values
 */
function prepChart(data) {
    var excessVal;

    //PapaParse data is in a 2d array
    for (var i = 0; i < data.length; i++) {

        //save reference to your excess value
        //cast all numeric values to int (they're originally strings)
        var excessVal = parseInt(data[i][4]);

        //date, limit value, and normal value can all be pushed to their arrays
        dates.push(data[i][0]);
        limit.push(parseInt(data[i][1]));
        normal.push(parseInt(data[i][3]));

        /* we must push a null value into the excess
        ** series if there is no excess for this node
        */
        if (excessVal == 0) {
            excess.push(null);
        } else {
            excess.push(excessVal);
        }
    }
    //render your chart
    zingchart.render({
        id: 'myChart',
        data: myConfig,
        height: 500,
        width: 725
    });
}
$(document).ready(function() {
    $('#csv-file').change(parseFile);
});

这篇关于从Zingchart中的CSV数据获取序列和值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！