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

Question

在 Zingchart 中创建混合图表时，我们可以使用 values 数组传递类型属性值。但我不确定从 CSV 读取数据时如何实现这一点。我想在下面的小提琴链接上创建混合图表，但要从 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

我使用您在一个相关问题中提供的示例数据为您制作了一个演示。如果你去这个演示页面并上传你最初提供的 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);
});