2015-11-03 3 views
4

Я хотел спросить, есть ли способ нажимать диаграмму на правую сторону, поэтому свободного места не будет. Я прикрепил простой образ, красную линию, что это пространство должно быть заполнено также диаграммой.Chart.js и правое свободное пространство

Также возможно создавать вертикальные линии в виде точек? Я не могу найти ответы на свои вопросы, на официальный документ. enter image description here

это мой javsacript код:

var lineChartData = { 
          labels : ["January","February","March","April"], 
          datasets : [ 
           { 
            label: "Dataset", 
            pointHighlightStroke : "rgba(220,220,220,1)", 
            data : [0,3,4,11] 
           } 
          ] 
         }; 


         window.onload = function(){ 
          var ctx = document.getElementById("canvas").getContext("2d"); 
          window.myLine = new Chart(ctx).Line(lineChartData, { 

           responsive: true, 
           scaleOverride: true, 
           scaleSteps: Math.ceil((max-start)/step), 
           scaleStepWidth: step, 
           pointDot : false, 
          }); 
         } 

ответ

3

Пространства есть, потому что последний й метка оси (апрель). Chart.js оставляет достаточно места, чтобы метка не обрезалась. Это также гарантирует, что всплывающая подсказка для последней точки отображается без обрезки.

Вы можете установить последние (или все) метки в пустую строку, чтобы избавиться от пространства. Однако вы не увидите никаких ярлыков в подсказках. Если вы хотите увидеть этикетки в подсказках вам необходимо расширить диаграмму, чтобы удалить метки оси х, как так

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function (data) { 
     var labels = data.labels; 
     data.labels = data.labels.map(function() { return '' }); 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 
     this.datasets[0].points.forEach(function (point, i) { 
      point.label = labels[i] 
     }) 
    } 
}); 

Обратите внимание, что вам нужно использовать LineAlt вместо линии.


Fiddle - http://jsfiddle.net/0u2c7tez/

Однако это будет по-прежнему обрезать всплывающую подсказку для последней точки. Если вы собираетесь включать всплывающие подсказки и не хотите, чтобы их обрезали, вам нужно использовать собственные всплывающие подсказки, чтобы всплывающая подсказка отображалась во внешнем элементе (вместо холста) и не была обрезана (см. https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html)

+0

Отлично, полный ответ. Спасибо. – user3573535

+0

Итак, нет способа показать метки по оси X и просто заставить их обрезать/обрезать в конце/вправо? – SISYN

Смежные вопросы