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

Question

在 Zingchart 中创建混合图表时，我们可以使用 values 数组传递类型属性值。但我不确定从 CSV 读取数据时如何实现。
我想在下面的 fiddle 链接上创建混合图表，但要从 csv 文件中读取数据。

  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>

Answer 1

我使用您在 one of your related questions 中提供的示例数据为您制作了一个演示。 .如果你去this demo page并上传您最初提供的 CSV，您应该得到以下图表:

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