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

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

var myConfig=
{
“类型”：“混合”，
“系列”：[
{
“价值”：[51,53,47,60,48,52,75,52,55,47,60,48]，
“类型”：“条”，
“悬停状态”：{
“可见”：0
}
},
{
“价值”：[69,68,54,48,70,74,98,70,72,68,49,69]，
“类型”：“行”
}
]
}
zingchart.render（{
id:'我的图表'，
资料来源：myConfig，
身高：500，
宽度：725
});
我使用您在中提供的示例数据为您制作了一个演示。如果您转到并上传最初提供的CSV，您应该会得到以下图表：

ZingChart包括一个用于基本图表的CSV解析器，但像这样更复杂的情况需要进行一些预处理才能将数据放到需要的地方。我在这个演示中使用了，但是还有其他可用的解析库

下面是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);
});

var-csvData；
var限制=[]，
正常=[]，
超额=[]，
日期=[]；
变量myConfig={
主题：“无”，
“类型”：“混合”，
“scale-x”：{
“项目重叠”：正确，
“最大项目数”：9999，
值：日期，
指南：{
可见：0
},
项目：{
角度：45
} 
},
“系列”：[{
“类型”：“条”，
“价值”：正常，
“堆叠”：没错，
“背景色”：“4372C1”，
“悬停状态”：{
“可见”：0
}
}, {
“类型”：“条”，
“价值”：过剩，
“堆叠”：没错，
“背景色”：“EB7D33”，
“悬停状态”：{
“可见”：0
}
}, {
“类型”：“行”，
“价值”：限制
}]
};
/*获取文件并使用PapaParse进行解析*/
函数解析文件（e）{
var file=e.target.files[0]；
parse（文件{
分隔符：“，”，
完成：功能（结果）{
results.data.shift（）；//第一个数组是头值，我们不需要这些值
csvData=结果。数据；
预处理图（csvData）；
}
});
}
/*处理PapaParse（d）CSV的结果并填充
**每个图表系列和scale-x值的数组
*/
功能图（数据）{
var超额；
//解析数据位于二维数组中
对于（变量i=0；i
您使用的数据集是否与您在其他问题中提供的相同？如果是这样的话，你会使用哪一列作为折线图？我将使用第二列作为折线图。我希望第一列位于x轴，因此我将使用垂直标签，但堆叠图表的线条与示例图中的不同。