Question

我试图在凹坑js条形图上绘制平均值，高值和低值直线。我不知道如何在y轴（成本）上绘制它们作为将穿过条形的直线。这是一个小提琴，它将高，低和平均值保存到需要在图表中绘制的相应变量中。有解决方案吗jsfiddle链接：http://jsfiddle.net/Ra2xS/14/

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"}];

//y- axis (cost) values to plot as straight line over bar chart in different colours
var avg = "11.65";
var high= "12.71";
var low = "10.82";

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 myChart = new dimple.chart(svg,data);
    myChart.setBounds(60, 30, 505, 305);        

    var x = myChart.addCategoryAxis("x", xcord);
    x.addOrderRule(xcord);
    x.showGridlines = true;

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

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

    myChart.draw(1500);

}

barplot("body",dim,data);

Answer 1

你可以通过添加一个单独的系列和它自己的数据来做到这一点，遗憾的是版本1.1.5中存在多个系列的错误，这意味着行标记变得混乱（所以我从下面的代码中删除了它们）。好消息是我刚刚完成了所有折线图代码的重写，这个问题将在下一个版本中修复（大概在一周左右），也可以通过从x轴上升而不是淡入淡出来正确地生成线条。来自黑人。

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" : parser(start) }, 
        { "Price Break" : "high", "cost" : 12.71, "date" : parser(end) },
        { "Price Break" : "avg", "cost" : 11.65, "date" : parser(start) }, 
        { "Price Break" : "avg", "cost" : 11.65, "date" : parser(end) },
        { "Price Break" : "low", "cost" : 10.82, "date" : parser(start) }, 
        { "Price Break" : "low", "cost" : 10.82, "date" : parser(end) }
    ];

    myChart.draw(1500);

}

barplot("body",dim,data);

http://jsfiddle.net/Ra2xS/28/

凹陷js直线y轴超过条形图

1 个答案: