2017-04-18 44 views
0

私はchart.js:設定垂直ラベルの向き

実際に私は、水平の値を設定することができますが、それは私が欲しいの結果ではありません、チャート・バーの上に垂直方向の値を設定する必要があります。バーの上に値を設定するには、このコードを使用して

イム:私は、この与える

animation: { 
         duration: 1, 
         onComplete: function() { 

          if(byDetails){ 

           var chartInstance = this.chart, 
             ctx = chartInstance.ctx; 
           ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); 
           ctx.textAlign = 'center'; 
           ctx.textBaseline = 'bottom'; 

           this.data.datasets.forEach(function (dataset, i) { 
            var meta = chartInstance.controller.getDatasetMeta(i); 
            meta.data.forEach(function (bar, index) { 

             ctx.fillStyle = 'black'; 
             dataset.data[index] = parseFloat(dataset.data[index]).toFixed(2); 
             var data = dataset.data[index]; 

             if (withPersent) { 
              data = dataset.data[index] + "%"; 
             } 


             var random = Math.floor(Math.random() * 16) + 5; 
             ctx.fillText(data, bar._model.x, bar._model.y - random); 


            }); 
           }); 
          } 

         } 
        } 

:あなたは、バーの上の値を参照としてenter image description here

は水平ですが、私は変更する必要がありますこのようなオリエンテーション:

enter image description here

PS:イムこのようなチャートを用い:

いずれかのアイデアがありますか?

答えて

0

あなたの質問に対する回答が見つかりましたか? 私のコードは:

animation: { 
 
      duration: 1, 
 
      onComplete: function() { 
 

 
       if (byDetails) { 
 

 
        var chartInstance = this.chart, 
 
         ctx = chartInstance.ctx; 
 
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); 
 
        ctx.textBaseline = 'bottom'; 
 

 
        this.data.datasets.forEach(function (dataset, i) { 
 
         var meta = chartInstance.controller.getDatasetMeta(i); 
 
         meta.data.forEach(function (bar, index) { 
 

 
          ctx.fillStyle = 'black'; 
 
          dataset.data[index] = parseFloat(dataset.data[index]).toFixed(2); 
 
          var data = dataset.data[index]; 
 

 
          if (withPersent) { 
 
           data = dataset.data[index] + "%"; 
 
          } 
 

 
          ctx.save(); 
 
          var random = Math.floor(Math.random() * 16) + 5; 
 
          ctx.translate(bar._model.x, bar._model.y - random); 
 
          ctx.rotate(-0.5 * Math.PI); 
 
          ctx.fillText(data, 0, 0); 
 
          ctx.restore(); 
 
         }); 
 
        }); 
 
       } 
 

 
      } 
 
     }

+0

私は-1コメントを得ることはありません。はい、コードスニペットを実行すると、構文エラーが発生します。しかし、今、私はグーグル/ストーリーオーバーフローをどのように縦書きのテキストを書く、彼のアイデアを変換と回転、保存と復元...私はどこにも見たことがない。これは素晴らしい投稿です。ありがとう、デニス。 – JustLooking

関連する問題