Chart.js酒吧和折线图

问题描述：

我想创建一个酒吧和折线图使用Chart.js，但我想条形图有一组不同的'标签'。Chart.js酒吧和折线图

折线图的数据位于第一个和最后一个点[2800，1300]，我希望线条在条形图的标签上绘制。

这可能吗？

预期

结果

矿通过片段或拨弄共享* *结果？ –

https://jsfiddle.net/anthonyumpad/2tp6uw32/ – watcher

答

https://jsfiddle.net/fgx92Lm5/

对数据线上的数据应该是：

data: [2800,2680,2565,2450,2335,2220,2105,1990,1875,1760,1645,1530,1415,1300]

换句话说，您需要根据终点计算其他值并根据条数以获得一条线的方式。

，δ=（2800年至1300年）/ 13 =〜115

谢谢Alex，我能够解决这个问题。 http://jsfiddle.net/anthonyumpad/956a0Lnd/ – watcher

答

我能够通过延伸Chartjs解决这个问题。

var originalLineDraw = Chart.controllers.bar.prototype.draw; 
 
Chart.helpers.extend(Chart.controllers.bar.prototype, { 
 
    draw: function() { 
 
    originalLineDraw.apply(this, arguments); 
 

 
    var chart = this.chart; 
 
    var ctx = chart.chart.ctx; 
 

 
    var index = chart.config.data.lineAtIndex; 
 
    if (index) { 
 
     var xaxis = chart.scales['x-axis-0']; 
 
     var yaxis = chart.scales['y-axis-0']; 
 

 
     ctx.save(); 
 
     ctx.beginPath(); 
 
     ctx.moveTo(xaxis.getPixelForValue(undefined, 0), yaxis.getPixelForValue(70)); 
 
     ctx.strokeStyle = '#000000'; 
 
     ctx.lineTo(xaxis.getPixelForValue(undefined, 7), yaxis.getPixelForValue(10)); 
 
     ctx.stroke(); 
 
     ctx.restore(); 
 
    } 
 
    } 
 
}); 
 

 
var config = { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
     label: "My First dataset", 
 
     data: [65, 0, 80, 81, 56, 85, 40], 
 
     fill: false 
 
    }], 
 
    lineAtIndex: 2 
 
    } 
 
}; 
 

 
var ctx = document.getElementById("myChart").getContext("2d"); 
 
new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="myChart"></canvas>

Chart.js酒吧和折线图

相关推荐