How to draw a vertical line with dimple?

问题:

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.

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 :)

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

回答1:

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 () {});

Here it is in your fiddle:

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