차트 JS 2의 막대 차트를 새로운 유형의 차트로 확장

Question

저는 실제로 차트 JS 2.0.1을 사용하여 페이지에 차트를 그립니다.

고객이 넘지 못하는 한계를 볼 수 있도록 막 대형 차트에 선을 추가하라고 고객에게 요청했습니다. 그와 마찬가지로 : 그래서 Bar chart with line on y axes

, 나는 라인에 대한 y 값을 제공 lineAtValue라는 매개 변수를 새로 막대 차트를 확장하기 위해 노력하고있어.

막 대형 차트를 확장하는 데 성공했지만 페이지에 표시된 다른 막 대형 차트보다 우선하며 다른 막 대형 차트에는 필요하지 않습니다. http://jsfiddle.net/d5ye1xpe/

그리고 나는 이와 같은 것을 가질 수있을 싶습니다 : 여기

내가 한 일이다와 (I 두 개 이상의 링크를 업로드 할 수 없습니다 죄송합니다) jsfiddle.net/L3uhpvd5/를

Chart.barWithLine(ctx,config); 

그러나 차트의 버전 2.0.1 JS

감사와

,

Ptournem

,536,

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

    } 
}); 

그러나 내가 @Ptournem이 configutation의 일종으로 유효한 2.3.0 플러그인으로 답변을 다시 작성,

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

) = 당신의 도움을 주셔서 감사

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