Уровни перекрывается в угловом-chart.js

Я использую угловой chart.jsУровни перекрывается в угловом-chart.js

<div class="container" ng-controller="LineCtrl"> 
    <canvas id="bar" class="chart chart-bar" data="barChartData" options="options" series="lineChartSeries" 
      colours="colours" legend="true" labels="barChartLabel"></canvas> 
</div>

CSS для этой диаграммы является

.chart #bar { 
    width: 100%!important; 
height: 300px; 
}

, но диаграмма, показывающая с перекрывающими друг друга ярлыками как

enter image description here

источник

2015-06-19 Rishabh Garg

Это потому, что Chart.js показывает все метки оси x и не отбрасывает их, если перекрытия. Для этого есть запрос функции https://github.com/nnnick/Chart.js/pull/897 - который все еще открыт.

Существует также отдельная ветка - https://github.com/nnnick/Chart.js/pull/521, которая решает проблему. Но он еще не был интегрирован в основную ветку, и вы, возможно, захотите прочитать полный поток, прежде чем выбирать это.

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

labels: ["Jan 1", "Jan 2",... and lots of days ....].map(function (e, index) { 
    return index % 5 ? "" : e; 
})

Отрегулируйте значение 5 по мере необходимости. Лучше всего было бы настроить это на основе размера массива, чтобы получить х количество точек или меньше, если количество точек пересекает порог. например если вы хотите не более 10 баллов, замените 5 size of array/10 IF размером массива> 200 или в зависимости от того, какая точка начинается с перекрытия. Просто убедитесь, что у вас нет слишком меньше маркеров :-). Например, если вы выбрали 30 вместо 200 в качестве порога, будут моменты, когда у вас есть только 3 маркера для 30+ точек данных. Или вы можете быть более креативными с вашей функцией сопоставления (например, убедитесь, что у вас есть метка в конце шкалы и т. Д.)

Вот пример только с Chart.js. Та же логика будет работать и с угловыми диаграммами.

var myLabels = [] 
var myValues = [] 
for (var i = 0; i < 1000; i++) { 
    myLabels.push("label" + i); 
    myValues.push(Math.random() * 1000) 
} 

var data1 = { 
    labels: myLabels, 
    datasets: [{ 
     label: "My Dataset", 
     fillColor: "rgba(244, 6, 6, 1)", 
     data: myValues 
    }] 
}; 

var ctx = document.getElementById("chart1").getContext("2d"); 
window.weeksChart = new Chart(ctx).Bar(data1, { 
    barShowStroke : false 
}); 


var data2 = { 
    labels: myLabels.map(function (e, index) { 
     return index % 30 ? "" : e; 
    }), 
    datasets: [{ 
     label: "My Dataset", 
     fillColor: "rgba(244, 6, 6, 1)", 
     data: myValues 
    }] 
}; 

var ctx = document.getElementById("chart2").getContext("2d"); 
window.weeksChart = new Chart(ctx).Bar(data2, { 
    barShowStroke : false 
});

с HTML

<canvas id="chart1" width="651" height="335"></canvas> 
<canvas id="chart2" width="651" height="335"></canvas>

А вот соответствующая скрипку - http://jsfiddle.net/2kvwndtq/

Недостатком является то, что если вы хотите подсказках вы должны переопределить функцию подсказки, а также, чтобы показать пробелы с соответствующей меткой, а не пробелы.

источник

2015-06-19 12:35:12 potatopeelings

Уровни перекрывается в угловом-chart.js

ответ

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