| Autor | Zpráva | ||
|---|---|---|---|
| pixel Profil * |
#1 · Zasláno: 5. 4. 2019, 12:25:43
Ahoj
na jeden web využívám tuto šablonu (adminlte.io/themes/AdminLTE/pages/charts/chartjs.html) A chci tam nasadit grafi Line Chart Potřebuji do něho vypsat denní hodnoty (na ose x je datum, na ose y je cena) Problém nastává, když tam mám hodně dnů (např 90) tak osa x je nečitelná, jak by se to dalo vyřešit aby na ose x byl třeba každý 3 den, ale v grafu všechny dny? |
||
| xaverista Profil |
#2 · Zasláno: 5. 4. 2019, 12:51:51
Ahoj,
zkus toto Stack overflow :-) |
||
| pixel Profil * |
#3 · Zasláno: 5. 4. 2019, 18:07:16
podle mě je v té šabloně problém, protože ty grafy jsou ve verzi 1.0.2 a na webu jsou jen návody na novější verze...
zkoušel jsem různé finty, bohužel bez výsledku... $(function () {
// Get context with jQuery - using jQuery's .get() method.
var areaChartCanvas = $('#lineChart').get(0).getContext('2d')
// This will get the first returned node in the jQuery collection.
var areaChart = new Chart(areaChartCanvas)
var areaChartData = {
type: 'line',
labels: ['05.01.19','06.01.19','07.01.19','08.01.19','09.01.19','10.01.19','11.01.19','12.01.19','13.01.19','14.01.19','15.01.19','16.01.19','17.01.19','18.01.19','19.01.19','20.01.19','21.01.19','22.01.19','23.01.19','24.01.19','25.01.19','26.01.19','27.01.19','28.01.19','29.01.19','30.01.19','31.01.19','01.02.19','02.02.19','03.02.19','04.02.19','05.02.19','06.02.19','07.02.19','08.02.19','09.02.19','10.02.19','11.02.19','12.02.19','13.02.19','14.02.19','15.02.19','16.02.19','17.02.19','18.02.19','19.02.19','20.02.19','21.02.19','22.02.19','23.02.19','24.02.19','25.02.19','26.02.19','27.02.19','28.02.19','01.03.19','02.03.19','03.03.19','04.03.19','05.03.19','06.03.19','07.03.19','08.03.19','09.03.19','10.03.19','11.03.19','12.03.19','13.03.19','14.03.19','15.03.19','16.03.19','17.03.19','18.03.19','19.03.19','20.03.19','21.03.19','22.03.19','23.03.19','24.03.19','25.03.19','26.03.19','27.03.19','28.03.19','29.03.19','30.03.19','31.03.19','01.04.19','02.04.19','03.04.19','04.04.19'],
datasets: [
{
label : ['2019'],
fillColor : '#80B5D3',
strokeColor : '#80B5D3',
pointColor : '#80B5D3',
pointStrokeColor : '#80B5D3',
pointHighlightFill : '#80B5D3',
pointHighlightStroke: '#80B5D3',
data : [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,146.09,0,0,0,0,2058.14,0,786.96,0,1250.41,958.85,0,451.02,0,0,2404.96,0,451.07,0,0,0,285.95,0,0,1214.05,0,0,848.84,307.44,0,0,189.56,0,1907.2,1817.64,3533.06,0,4009.97,0,0,2186.78,0,1737.09,0,0,3715.7,1721.49,656.2,4162.43,1440.5,0,0,0,3262.81,5695.2,377.69,0,0,1074.69,0,0,0,0,0],
},
]
}
var areaChartOptions = {
//Boolean - If we should show the scale at all
showScale : true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : false,
//String - Colour of the grid lines
scaleGridLineColor : 'rgba(0,0,0,.05)',
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines : true,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Number - Tension of the bezier curve between points
bezierCurveTension : 0.3,
//Boolean - Whether to show a dot for each point
pointDot : false,
//Number - Radius of each point dot in pixels
pointDotRadius : 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius : 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a color
datasetFill : true,
//String - A legend template
legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio : true,
//Boolean - whether to make the chart responsive to window resizing
responsive : true,
showXLabels: 8
}
//-------------
//- LINE CHART -
//--------------
var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
var lineChart = new Chart(lineChartCanvas)
var lineChartOptions = areaChartOptions
lineChartOptions.datasetFill = false
lineChart.Line(areaChartData, lineChartOptions)
}) |
||
|
Časová prodleva: 5 let
|
|||
0