チャートJS 2の棒グラフを新しいタイプのチャートに拡張する

Question

実際には、チャートJS 2.0.1を使用してページにチャートを描画しています。

私の顧客は、棒グラフに行を追加するように頼んだので、行けない限界を見ることができます。そのような：だからBar chart with line on y axes

、私はラインのyの値を提供lineAtValueと呼ばれるパラメータを取り、新しいものに棒グラフを拡張しようとしています。

棒グラフの拡張に成功しましたが、ページに表示されている他の棒グラフを上書きしました。他の棒グラフでは必要ありません。 http://jsfiddle.net/d5ye1xpe/

そして、私はこの1つのようなものを持ってできるようにしたいと思います：ここで

は私がやったことあるjsfiddle.net/L3uhpvd5/（申し訳ありませんが、私は以上の2つのリンクをアップロードすることはできません）と

Chart.barWithLine(ctx,config); 

しかし、バージョン2.0.1と

チャートJSのおかげで、

Ptournem

Answer 1

は、これは便利ですが、私はただ、実際のデータではありませんラインのための新しいデータセットを追加するために最適化されたことがないことがわかりました。

最後に、バータイプを拡張する新しいタイプの作成に成功し、値が提供されている場合はラインを追加しました。

// Store the original Draw function 
var originalLineDraw = Chart.controllers.bar.prototype.draw; 
// extend the new type 
Chart.helpers.extend(Chart.controllers.bar.prototype, { 
    draw: function() { 
    // use the base draw function 
    originalLineDraw.apply(this, arguments); 

    // get chart and context 
    var chart = this.chart; 
    var ctx = chart.chart.ctx; 

    // get lineAtValue value 
    var value = chart.config.lineAtValue; 

    // stop if it doesn't exist 
    if (typeof value === "undefined") { 
     return; 
    } 

    // draw the line 
    var xaxis = chart.scales['x-axis-0']; 
    var yaxis = chart.scales['y-axis-0']; 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.moveTo(xaxis.left, yaxis.getPixelForValue(value)); 
    ctx.strokeStyle = '#ff0000'; 
    ctx.lineTo(xaxis.right, yaxis.getPixelForValue(value)); 
    ctx.stroke(); 
    ctx.restore(); 

    } 
}); 

しかし=あなたの助けをありがとうございました）

Answer 2

混合型チャートは、チャート2.xバージョンでサポートされています。 あなたは次のような設定を作成することができます -

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

ここJsのフィドル作成：https://jsfiddle.net/nehadeshpande/eu70wzo4/

が、これは便利です場合は私に知らせてください。

おかげで、 ネハ

Answer 3

このことができます場合は、私がconfigutation

Chart.plugins.register({ 
    config: { 
     /** @type {rbg|rgba|hex} Stroke color */ 
     strokeColor: "rgb(255, 0, 0)", 

     /** @type {int} Column width */ 
     lineWidth: 1, 
    }, 

    afterDatasetsDraw: function(chartInstance, easing) { 
     var value = chartInstance.config.lineAtValue; 

     if (typeof value === 'undefined') return; 

     var ctx = chartInstance.chart.ctx, 
      xaxis = chartInstance.scales['x-axis-0'], 
      yaxis = chartInstance.scales['y-axis-0']; 

     ctx.save(); 
     ctx.beginPath(); 
     ctx.moveTo(xaxis.left, yaxis.getPixelForValue(value)); 
     ctx.lineWidth = this.config.lineWidth; 
     ctx.strokeStyle = this.config.strokeColor; 
     ctx.lineTo(xaxis.right, yaxis.getPixelForValue(value)); 
     ctx.stroke(); 
     ctx.restore(); 
    }, 

    // IPlugin interface 
    afterDatasetsUpdate: function(chartInstance) {}, 
    afterDraw: function(chartInstance, easing) {}, 
    afterEvent: function(chartInstance, event) {}, 
    afterInit: function(chartInstance) {}, 
    afterScaleUpdate: function(chartInstance) {}, 
    afterUpdate: function(chartInstance) {}, 
    beforeRender: function(chartInstance) {}, 
    beforeDatasetsDraw: function(chartInstance, easing) {}, 
    beforeDatasetsUpdate: function(chartInstance) {}, 
    beforeDraw: function(chartInstance, easing) {}, 
    beforeEvent: function(chartInstance, event) {}, 
    beforeInit: function(chartInstance) {}, 
    beforeUpdate: function(chartInstance) {}, 
    destroy: function(chartInstance) {}, 
    resize: function(chartInstance, newChartSize) {}, 
}); 

のいくつかの並べ替えを有効2.3.0プラグイン可能にする@Ptournem答えを書き換えます