Question

按照此link中的示例，我想在我的图表上绘制一条垂直线。问题是，当我尝试创建一条垂直线（在同一个日期），而不是获取线时，dimple会添加我的2个值并绘制一个点，如下例所示：fiddle

  var dim = {"width": 590,"height": 450}; //chart container width
    var data = [{"date": "01-02-2010", "cost": "11.415679194952766"}, {"date": "01-03-2010", "cost": "10.81875691467018"}, {"date": "01-04-2010", "cost": "12.710197879070897"}];

    function barplot(id, dim, data) {
        keys = Object.keys(data[0]);
        var xcord = keys[0];
        var ycord = keys[1];
        var svg = dimple.newSvg(id, dim.width, dim.height);
        var parser = d3.time.format("%d-%m-%Y")
        var dateReader = function (d) {
            return parser.parse(d[xcord]);
        }
        var start = d3.time.month.offset(d3.min(data, dateReader), -1);
        var end = d3.time.month.offset(d3.max(data, dateReader), 1);

        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 505, 305);

        //var x = myChart.addCategoryAxis("x", xcord);
        var x = myChart.addTimeAxis("x", xcord, "%d-%m-%Y", "%b %Y");
        x.overrideMin = start;
        x.overrideMax = end;
        x.addOrderRule(xcord);
        x.showGridlines = true;
        x.timePeriod = d3.time.months;
        x.floatingBarWidth = 100;

        var y = myChart.addMeasureAxis("y", ycord);
        y.showGridlines = true;
        y.tickFormat = ',.1f';

        var s1 = myChart.addSeries(null, dimple.plot.bar);
        var s2 = myChart.addSeries(null, dimple.plot.line);
        s2.lineWeight = 3;

        var s3 = myChart.addSeries("Price Break", dimple.plot.line);
        s3.data = [{
            "Price Break": "high",
            "cost": 12.71,
            "date": '13-01-2010'
        }, {
            "Price Break": "high",
            "cost": 12.71,
            "date": '13-01-2010'
        }, ];

        myChart.draw(1500);

    }

    barplot("body", dim, data);

我现在的解决方案是绘制一个带有一个值的条形图，但这是一种解决方法，因为稍后我想在此行旁边添加一些文本，也是垂直方向的。

我在谷歌和StackOverflow上搜索过，但我找不到解决这个问题的方法，在文档中我也找不到任何关于如何做到这一点的提示，而且非常烦人。

任何帮助将不胜感激：）

我已经看到你如何用d3制作一条线，问题是我想用凹坑画出来。

Answer 1

您引用的方法以相同的价格从最小日期到最大日期绘制一条线。您已更改日期以匹配，这意味着积分将被聚合。我能想到的最简单的方法是使用单点区域，它将自动从x轴绘制一条线。通过将其绘制在隐藏的100％轴上，它将转到图表的顶部：

首先添加一个隐藏的百分比轴：

var y2 = myChart.addPctAxis("y", "Dummy");
y2.hidden = true;

然后使用单个数据点将新的区域系列映射到它（此处的值并不重要，因为它将是唯一的数据点，因此自动为最大值）：

var s3 = myChart.addSeries("Price Break", dimple.plot.area, [x, y2]);
s3.data = [{
    "Price Break": "high",
    "Dummy": 1,
    "date": '13-01-2010'
}];

最后，它可能值得从这一行中删除工具提示，因为它引用了一个虚拟值：

s3.addEventHandler("mouseover", function () {});

这是你的小提琴：

http://jsfiddle.net/4w6gkq5s/1/

如何绘制带凹坑的垂直线？

1 个答案: