条形图上的酒窝js直线y轴 [英] dimple js straight line y-axis over bar chart

问题描述

我正在尝试在凹痕 js 条形图上绘制平均值、高值和低值直线.我不知道如何在 y 轴(成本)上将它们绘制为穿过条形的直线.这是将高、低和平均值保存到需要在图表上绘制的相应变量中的小提琴.有什么解决办法吗?jsfiddle 链接:http://jsfiddle.net/Ra2xS/14/

I am trying to draw Average, High and Low value straight line on a dimple js bar chart. I have no clue how they can be drawn on y-axis (cost) as straight line that will cut through the bars. Here is the fiddle that has high, low and average values saved into corresponding variable that needed to be drawnon the chart. Any solution? jsfiddle link: 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);

推荐答案

您可以通过添加具有自己数据的单独系列来实现，不幸的是，1.1.5 版本中存在多行系列的错误，这意味着行标记会失控(所以我已经从下面的代码中删除了它们).好消息是我刚刚完成了所有折线图代码的重写，这个问题将在下一个版本中得到解决(一周左右)，并且该线将通过从 x 轴上升而不是淡入来正确动画来自黑色.

You can do it by adding a separate series with it's own data, unfortunately there's a bug with multiple line series in version 1.1.5 which means line markers go haywire (so I've removed them from the code below). The good news is I've just finished rewriting all the line chart code and this problem will be fixed in the next version (coming in a week or so), also the line will animate properly by rising from the x axis instead of fading in from black.

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轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！