如何绘制一条带有凹坑的垂直线？ [英] How to draw a vertical line with dimple?

问题描述

按照此链接中的示例，我想在我的图表上画一条垂直线。
问题是，当我尝试创建一个垂直线（在同一日期），而不是获取线，dimple添加我的2值，并绘制一个点，就像这个例子： fiddle

Following the example in this link , I would like to draw a vertical line on my chart. The problem is, when I try to create a vertical line (on the same date), instead of obtaining the line, dimple adds my 2 values and draws a point, like in this example: 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);

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

The solution I have for now is I draw a bar chart with one value, but this is a workaround, because later on I want to add some text next to this line, vertically oriented also.

我在Google和StackOverflow上搜索，但我找不到解决方案这个问题，在文档中我也找不到任何关于如何做的提示，这是非常讨厌。

I have searched on Google and on StackOverflow, but I cannot find a solution to this problem, and in the documentation I also cannot find any hint on how to do that, and it is very annoying.

任何帮助将不胜感激：）

Any help would be appreciated :)

我已经看到了如何使用d3生成一行，问题是我想要用dimple绘制。

I have seen how you can make a line with d3, the problem is that I want this drawn with dimple.

推荐答案

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

The approach you reference draws a line from the minimum date to the maximum date at the same price. You have changed the dates to match which means the points get aggregated. The easiest way I can think to do this is with a single point area, which will automatically draw a line from the x axis. By drawing it against a hidden 100% axis it will go to the top of the chart:

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

First add a hidden percentage axis:

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

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

Then map a new area series to it with a single data point (the value here doesn't matter as it will be the only data point and therefore automatically the maximum value):

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

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

Finally it's probably worth removing the tooltip from this line as it references a dummy value:

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

这里是你的小提琴：

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

这篇关于如何绘制一条带有凹坑的垂直线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！