Question

我正在尝试为库存数据创建折线图，例如开盘价，最高价，最低价，收盘价和成交量，但当我试图在折线图中传递这些数据时，它不显示正确的图表，它只表示日期和收盘价。但我想通过Open High Low Close和线图中的音量请帮助我。我只想传递更多数据。

  <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        // set the dimensions and margins of the graph
        var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

        // Parse the date / time
        var parseDate = d3.timeParse("%d-%b-%y");

        // Set the ranges
        var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);

        // Define the axes
        var xAxis = d3.axisBottom().scale(x)
         .tickSizeInner(-height)
    .tickSizeOuter(0)
    .tickPadding(10);

        var yAxis = d3.axisLeft().scale(y)
         .tickSizeInner(-width)
    .tickSizeOuter(0)
    .tickPadding(10);

        var zAxis = d3.axisRight(y);

        // Define the line
        var valueline = d3.line()
            .x(function (d) { return x(d.Date); })
            .y(function (d) { return y(d.Close); });

        // Adds the svg canvas
        var svg = d3.select("#DivChartShow")
            .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("/Content/data2.csv", function (error, data) {
            // for filter data by days
            if (days != undefined) {
                var today = new Date();
                today.setDate(today.getDate() - days);

                var dd = today.getDate();
                var mm = today.getMonth() + 1;
                var yyyy = today.getFullYear();

                if (dd < 10) {
                    dd = '0' + dd;
                }
                if (mm < 10) {
                    mm = '0' + mm;
                }
                var today = mm + '/' + dd + '/' + yyyy;

                var cutoffDate = moment(today).format('DD-MMM-YY');

                data = data.filter(function (i) {
                    return parseDate(i.Date) > parseDate(cutoffDate);
                });
            }

            data.forEach(function (d) {
                d.Date = parseDate(d.Date);
                d.Open = +d.Open;
                d.High = +d.High;
                d.Low = +d.Low;
                d.Close = +d.Close;
            });

            // Scale the range of the data
            x.domain(d3.extent(data, function (d) { return d.Date; }));
            y.domain([0, d3.max(data, function (d) { return d.Close; })]);

            svg.append("path")
                .attr("class", "line")
                .attr("d", valueline(data));

            // Add the X Axis
            svg.append("g")
               .attr("class", "x axis")
               .attr("transform", "translate(0," + height + ")")
               .call(xAxis);

            // Add the Y Axis
            if (clStatus == true) {
                svg.append("g")
                   .attr("class", "y axis")
                   .call(yAxis);
            }
            if (crStatus == true) {
                svg.append("g")
                   .attr("class", "z axis")
                   .attr("transform", "translate(" + width + " ,0)")
                   .call(yAxis);
            }
        });


    </script>

Answer 1

我只是将此作为答案发布，因为评论太多了。从你的代码：

import {CalendarComponent} from "ap-angular2-fullcalendar"; import { ... CalendarComponent } from './layouts'; @NgModule({ imports: [ ... CalendarComponent ], ...)

此行仅在y轴上绘制var valueline = d3.line() .x(function (d) { return x(d.Date); }) .y(function (d) { return y(d.Close); });。或者：为每个属性（d.Close，d.Open等）编写多个行函数，或者按属性嵌套数据，并使用d.High绘制一条具有某种颜色标度的行。我认为如果所有属性使用相同的值（美元），这个版本可能是可行的：https://bl.ocks.org/mbostock/3884955

d3.js使用.csv数据格式的折线图

1 个答案: