从 Zingchart 中的 CSV 数据获取系列和值

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 one of your related questions https://stackoverflow.com/questions/31722559/stacked-chart-with-zingchart. If you go to this demo page http://www.zingchart.com/support/csvParse and upload the CSV you originally provided, you should get this chart:

ZingChart 包含一个用于基本图表的 CSV 解析器，但像这样的更复杂的情况需要进行一些预处理才能将数据获取到需要的位置。我用了帕帕帕斯 http://papaparse.com/对于这个演示，还有其他可用的解析库。

这是 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": 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);
});