我怎樣才能防止標籤重疊的手機屏幕上的chart.js之

我使用這個例子jsfiddle上，但是當我用一個小屏幕的標籤這樣開始我怎樣才能防止標籤重疊的手機屏幕上的chart.js之

我可以做什麼重疊阻止它？我想讓它充分響應。我試圖改變長度和其他長寬比等，但沒有成功。

var ctx = $('#myChart'); 

ctx.height(500); 

var myChart = new Chart(ctx, { 
    type: 'horizontalBar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    maintainAspectRatio: false, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
});

來源

2017-06-14 ephemeral

@ℊααnd我chart.js之禁用響應選項，現在加了我自己的CSS。以某種方式解決工作。但不是100％ – ephemeral

這可以通過動態地改變y軸標籤的字體大小（動態地）來防止。儘管在ChartJS中沒有內置的方法，但無論您如何調整圖表大小，字體大小始終都是相同的。

但是，要解決這個問題，你可以使用下面的圖表插件，這將使得字體大小響應...

plugins: [{ 
    beforeDraw: function(c) { 
     var chartHeight = c.chart.height; 
     c.scales['y-axis-0'].options.ticks.fontSize = chartHeight * 6/100; 
    } 
}]

添加這個插件，然後您的圖表選項。

這裏是一個working example on jsFiddle

來源

2017-06-15 05:28:08

Wao。謝謝。完美的工作 – ephemeral

我能再問一件事嗎？ – ephemeral

我只想顯示那些值大於9的工具提示。我使用了回調，但我認爲默認情況下，lable名稱必須出現在工具提示中。我如何刪除它？我在堆棧上讀到，這是不可能的，我必須爲此編寫自己的模板？我不知道如何使用和製作模板。任何方法？ – ephemeral

您可以添加一些CSS停止圖表變得太小，迫使一些用戶在移動向右滾動： https://jsfiddle.net/panchroma/yybc26Lr/1/

我所做的唯一變化是添加

.chart{ 
    min-width:300px; 
}

來源

2017-06-15 02:48:53

實際上我有42條記錄，我必須在Iphone 5屏幕上進行調整。那麼顯然我需要壓縮這個呢？我怎麼能做到這一點？ – ephemeral

我怎樣才能防止標籤重疊的手機屏幕上的chart.js之

回答

相關問題