如何为csv中的每一列创建单独的图表

How to create a separate chart for every column in csv

本文关键字：一列 创建 单独 csv      更新时间：2023-09-26

我有一个csv，我希望每个品牌+日期都有一个单独的图表。

 date,Apple,Google,Amazon,Microsoft,IBM,Facebook
    2015-08-11,113.489998,690.299988,527.460022,46.41,155.509995,93.620003
    2015-08-10,119.720001,663.140015,524,47.330002,156.75,94.150002
    2015-08-07,115.519997,664.390015,522.619995,46.740002,155.119995,94.300003
    2015-08-06,115.129997,670.150024,529.460022,46.619999,156.320007,95.120003
    2015-08-05,115.400002,673.289978,537.01001,47.580002,157.899994,96.440002

现在我可以为每个品牌创建这个代码，我得到了6个单独的图表。但我认为必须有一个简单的解决方案。

// Adds the svg canvas
var chart1 = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Get the data
d3.csv("data1.php", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.m_data = +d.mrr;
    });
    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([d3.min(data, function(d) { return d.mrr; }), d3.max(data, function(d) { return d.mrr; })]);
    // Add the valueline path.
    chart1.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));
    // Add the X Axis
    chart1.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
    // Add the Y Axis
    chart1.append("g")
        .attr("class", "y axis")
        .call(yAxis);
    chart1.append("text")
        .attr("x", width / 2 )
        .attr("y", 0)
        .style("text-anchor", "middle")
        .text("mrr");
});

现在把它放在函数中

add_chart("chart1",'mrr');
add_chart("chart2",'arr');

function add_chart(id,field_name){     
    console.log(id+', ' + field_name );
    var my_object = {};

    // Adds the svg canvas
    my_object[id] = d3.select("body")
        .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    // Get the data
    d3.csv("data1.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.m_data = +d[field_name];
        });
        // Scale the range of the data
        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([d3.min(data, function(d) { return d[field_name]; }), d3.max(data, function(d) { return d[field_name]; })]);
        // Add the valueline path.
        my_object[id].append("path")
            .attr("class", "line")
            .attr("d", valueline(data));
        // Add the X Axis
        my_object[id].append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
        // Add the Y Axis
        my_object[id].append("g")
            .attr("class", "y axis")
            .call(yAxis);
        my_object[id].append("text")
            .attr("x", width / 2 )
            .attr("y", 0)
            .style("text-anchor", "middle")
            .text(field_name);
    });
}
相关文章：