2016-08-31 21 views
1

私はそうのようなChart.jsで作られたチャートがあります。Chart.js上下対称チャート

enter image description here

<canvas id="customer_chart" height="50"></canvas> 

<script> 
var ctx = document.getElementById('customer_chart').getContext('2d'); 

var chart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: ['', 'Conference', 'Webinar', 'Trial'], 
     datasets: [{ 
      label: 'Pipeline', 
      lineTension: 0.3, 
      data: [0, 10, 20, 15], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
      ], 
     }], 
    } 
}) 
</script> 

しかし、私がしたいことは、左逆さまの数字のないこのようなものです( 、怠惰編集):

enter image description here

しかし、私はこれを行うには、任意のすぐに明白な方法が表示されません。何か案は?

答えて

2

Chart.jsドキュメントをご覧になる場合は、plugins for your chartを作成することができます。
プラグインは、(すべての以上の何かを描画するために)を描画される(一部のデータを追加する)あなたはそれを表示する前に、あなたのグラフを編集するなどbeforeUpdateafterDraw、などいくつかのイベントを処理させるか、すべての後に。

希望するものは、作成する前にチャートを編集する必要があるため、beforeInitイベントが必要です。

Chart.pluginService.register({ 
    beforeInit: function(chart) { 
     // what you put here will be done before the chart initiates 
    } 
}); 


今、あなたはあなたが欲しいものを行うために使用するものを知っている:ところで

は、プラグインは、次のように作成されます。

私はまだ例を作りました。ここでは、まったく同じデータを持つ別のデータセットを作成しましたが、否定的です。
the result hereが表示されます。

jQueryを使用して、最初のデータセット(see this answer)のクローンを作成する必要がありました。
私はそれがなくても動作させることはできませんでしたが、方法を見つけたらそれを聞きたいです。