个人中心
gpt4 book ai didi

javascript - 考虑负值的条形图

转载 作者：行者123 更新时间：2023-12-03 04:54:02 25 4
gpt4 key购买 nike

我在名为 BarData.csv 的 csv 文件中包含以下数据:

Fruit,dt,amount
Apple,12/28/2016,-1256
Apple,12/29/2016,-500
Apple,12/30/2016,3694
Apple,12/31/2016,5586
Apple,1/1/2017,4558
Apple,1/2/2017,6696
Apple,1/3/2017,7757
Apple,1/4/2017,8528
Apple,1/5/2017,5543
Apple,1/6/2017,3363
Apple,1/7/2017,5464
Pear,12/25/2017,250
Pear,12/26/2017,669
Pear,12/27/2017,441
Pear,12/28/2017,159
Pear,12/29/2017,357
Pear,12/30/2017,775
Pear,12/31/2017,669

以下 html、css 和 javascript 位于一个 .html 文件中:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>BAR SINGLE FUNCTION</title>
    <script src="http://d3js.org/d3.v3.js"></script>
    <style type="text/css">
    #radioDiv {
        top: 45px;
        font-family: verdana;
        font-size: 8px;
        width: 455px;
    }

    #TOPbarChart {
        position: absolute;
        top: 50px;
        left: 30px;
        width: 750px;
        height: 195px;
    }

    .axis--y path,
    .axis--x path {
        display: none;
    }

    .axis--x line,
    .axis--y line {
        stroke: black;
        fill: none;
        stroke-width: 2px
    }

    .yAxis text,
    .xAxis text {
        font: 7pt Verdana;
        stroke: none;
        fill: black;
    }

    .title,
    .titleX {
        font-family: Verdana;
        font-size: 10px;
    }
    </style>
</head>

<body>
    <div id="radioDiv">
        <label>
            <input id="radioFrt" type="radio" name="frt" value="Apple" class="radioB" checked> APPLE
        </label>
        <label>
            <input type="radio" name="frt" value="Pear" class="radioB"> PEAR
        </label>
    </div>
    <div id="TOPbarChart"></div>
    <script type="text/javascript">
    var currentFruit = "Apple";
    var currentColr = "#00a5b6";

    var barDataCSV_Dly = "BarData.csv";

    //
    //
    // radio button
    document.getElementById("radioFrt").checked = true;
    d3.selectAll('input[name="frt"]').on("change", function change() {
        currentFruit = this.value;
        TOPbarChart(currentFruit, currentColr);
    });

    //FORMATS 
    var parseDate = d3.time.format("%m/%d/%Y").parse;



    // 
    // BASIC SIZING
    // 
    function barChartBasics() {
        var margin = {
                top: 25,
                right: 35,
                bottom: 25,
                left: 70
            },
            width = 550 - margin.left - margin.right,
            height = 155 - margin.top - margin.bottom,
            colorBar = d3.scale.category20(),
            barPaddingFine = 1,
            barPaddingThick = 2;
        return {
            margin: margin,
            width: width,
            height: height,
            colorBar: colorBar,
            barPaddingFine: barPaddingFine,
            barPaddingThick: barPaddingThick
        };
    }


    // create svg element
    var basics = barChartBasics();
    var svg = d3.select("#TOPbarChart")
        .append("svg")
        .attr({
            "width": basics.width + basics.margin.left + basics.margin.right,
            "height": basics.height + basics.margin.top + basics.margin.bottom,
            id: "svgTOPbarChart"
        });

    // create svg  group
    var plot = svg
        .append("g")
        .attr({
            "transform": "translate(" + basics.margin.left + "," + basics.margin.top + ")",
            id: "svgPlotTOPbarChart"
        });

    var axisPadding = 2;
    var leftAxisGroup = svg
        .append('g')
        .attr({
            transform: 'translate(' + (basics.margin.left - axisPadding) + ',' + (basics.margin.top) + ')',
            'class': "yAxis axis--y",
            id: "yAxisGTOPbarChart"
        });

    var bottomAxisGroup = svg
        .append('g')
        .attr({
            'class': "xAxis axis--x",
            id: "xAxisGTOPbarChart"
        });

    var titleTxt = svg.append("text")
        .attr({
            x: basics.margin.left + 12,
            y: 20,
            'class': "title",
            'text-anchor': "start"
        })

    // create scales with ranges
    var xScale = d3.time.scale().range([0, basics.width]);
    var yScale = d3.scale.linear().range([basics.height, 0]);




    function TOPbarChart(
        frt, colorChosen) {

        // get the data
        d3.csv(barDataCSV_Dly, function(rows) {

            TOPbarData = rows.map(function(d) {
                return {
                    "Fruit": d.Fruit,
                    "dt": parseDate(d.dt),
                    "amount": +d.amount
                };
            }).filter(function(row) {
                if (row['Fruit'] == frt) {
                    return true;
                }
            });


            // create domains for the scales
            xScale.domain(d3.extent(TOPbarData, function(d) {
                return d.dt;
            }));
            var amounts = TOPbarData.map(function(d) {
                return d.amount;
            });
            var yMax = d3.max(amounts);
            var yMin = d3.min(amounts);
            var yMinFinal = 0;
            if (yMin < 0) {
                yMinFinal = yMin;
            }
            yScale.domain([yMinFinal, yMax]);


            // introduce the bars
            // var plot = d3.select("#svgPlotTOPbarChart")
            var sel = plot.selectAll("rect")
                .data(TOPbarData);

            sel.enter()
                .append("rect")
                .attr({
                    x: function(d, i) {
                        return xScale(d.dt);
                    },
                    y: function(d) {
                        return yScale(d.amount);
                    },
                    width: (basics.width / TOPbarData.length - basics.barPaddingFine),
                    height: function(d) {
                        return basics.height - yScale(d.amount);
                    },
                    fill: colorChosen,
                    'class': "bar"
                });

            // this little function will create a small ripple affect during transition
            var dlyRipple = function(d, i) {
                return i * 100;
            };
            sel
                .transition()
                .duration(dlyRipple) //1000
                .attr({
                    x: function(d, i) {
                        return xScale(d.dt);
                    },
                    y: function(d) {
                        return yScale(d.amount);
                    },
                    width: (basics.width / TOPbarData.length - basics.barPaddingFine),
                    height: function(d) {
                        return basics.height - yScale(d.amount);
                    },
                    fill: colorChosen
                });

            sel.exit().remove();


            // add/transition y axis - with ticks and tick markers
            var axisY = d3.svg.axis()
                .orient('left')
                .scale(yScale)
                .tickFormat(d3.format("s")) // use abbreviations, e.g. 5M for 5 Million
                .outerTickSize(0);
            leftAxisGroup.transition().duration(1000).call(axisY);

            // add/transition x axis - with ticks and tick markers
            var axisX = d3.svg.axis()
                .orient('bottom')
                .scale(xScale);

            bottomAxisGroup
                .attr({
                    transform: 'translate(' + (basics.margin.left + ((basics.width / TOPbarData.length) / 2)) + ',' + (basics.margin.top + basics.height) + ')',
                })
                .transition().duration(1000).call(axisX.ticks(5));


            titleTxt.text("Daily: last " + TOPbarData.length + " days");
            // console.log(TOPbarData.length)

        });
    }

    //
    //
    //
    //
    TOPbarChart(currentFruit, currentColr);
    //
    //
    //
    //
    </script>
</body>

</html>

当所有数据都是正值时，一切都很好 - 但是当某些数据为负值时，我们可以在这个 plunker 演示中看到结果:

http://plnkr.co/edit/1hudJYkRq2MnuIlwxXZi?p=preview

如何修改代码以便:- 显示负条？- 当包含负数时，正数条的底部垂直向上移动？- 垂直移动也包含在过渡中？

以上问题不止 1 个，但如果能提供任何帮助，我们将不胜感激。

最佳答案

关键是使用条形的 y 和 height 属性来正确定位它们。

对于y，将其更改为:

  y: function(d) {
          return yScale(Math.max(0, d.amount));
        },

对于高度，将其更改为:

height: function(d) {
              return Math.abs(yScale(d.amount) - yScale(0));
            },

然后，您可以设置负条的样式，使它们具有不同的颜色。

检查更新的 Plunkr - http://plnkr.co/edit/q7dQsPW0PiPuwFTy8gLN?p=preview

编辑:

对于着色部分，如果你想减少线条并且想要更简单，你可以用1个衬垫来实现。

而不是:

  fill: function(d) {
                var col = colorChosen
                if (d.amount < 0) {
                    col = "#FF0000";
                }
                return col;
            },
  });

你可以这样做:

  fill: function(d) {
                        return d.amount < 0 ? "#FF0000" : colorChosen;
                    },

关于javascript - 考虑负值的条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42516414/

25 4 0
文章推荐： ruby-on-rails - Rails 3 - 无法安装 pg gem
文章推荐： java - mainClassName的etter : String' is deprecated.在Java中已弃用
文章推荐： real-time - 硬实时、软实时和硬实时之间的区别？
文章推荐： flutter - 为什么列表长度为0？为什么不添加数据？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com