Chart.js + responsive - zmiana typu wykresu

Potrzebuję wstawić do projektu proste wykresy, więc postanowiłem znaleźć coś w sieci. Trafiłem na chartjs oraz dodatek, respChartJS, który sprawia, że wykresy stają się responsywne (czego bardzo potrzebuję). Postąpiłem według wskazówek, czyli w kodzie HTML stworzyłem wykres:

<canvas class="myChart" height="110" width="800" ></canvas>

następnie dodałem właściwości:

	<script>
		var data = {
			labels : ["Sprzęt #1","Sprzęt #2","Sprzęt #3"],
			datasets : [
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,1)",
					data : [150,80,250]
				}
			]
		}
		respChart($(".myChart"),data);
	</script>

Wykres wyświetla się na stronie, jest responsywny, tylko nie potrafię zmienić typu wykresu, np. na Bar Chart. Nie za bardzo rozumiem, jak mogę go zmienić tak aby działał z dodatkiem.

Domyślny wykres:

 1.png   9,15 KB   0 Ilość pobrań

Jedyny sposób jaki przyszedł mi do głowy.

W pliku chartjs-option.js w linii 60 zmień:

new Chart(ctx).Line(data, options);

na np:

new Chart(ctx).Bar(data, options);

Można tam oczywiście zmodyfikować tak żeby w opcjach podawać typ wykresu i jakiegoś ifa rozpoznającego.

Irytuje mnie jedna rzecz w tych wykresach, a mianowicie to, gdy ustawię takie same wartości dla elementów to nie rysuje wykresów. Wygląda to tak: http://jsfiddle.net/k3YH7/1/

W dokumentacji jest wzmianka o skali, ale nie wiem czy mogę tego użyć do zmienienia skali i czy w ogóle to coś da.

//Number - The number of steps in a hard coded scale 
scaleSteps : null, 

//Number - The value jump in the hard coded scale 
scaleStepWidth : null, 

//Number - The scale starting value 
scaleStartValue : null,

Znalazłem w necie takie rozwiązanie:

var min = _.max(chartData.datasets[0].data) 
  var max = _.min(chartData.datasets[0].data) 

  if (max == min) {
    var opt = {
      scaleOverride : true,
      scaleSteps : 3,
      scaleStepWidth : 1,
      scaleStartValue : max - 2
    }
    new Chart(ctx).Line(chartData, opt);
  }

Spróbuj je zastosować u siebie, w chartjs-option.js przed uprzednio edytowaną linią:

var min = _.max(data.datasets[0].data) 
var max = _.min(data.datasets[0].data) 

if (max == min) {
    options.scaleOverride : true;
    options.scaleSteps : 3;
    options.scaleStepWidth : 1;
    options.scaleStartValue : max - 2;
}

new Chart(ctx).Bar(data, options);

Nie mam jak tego sprawdzić to nie wiem czy działa, przetestuj i daj znać jaki jest efekt.

Hmmmm, a gdzie ten fragment kodu dodać, o to jest pytanie. Na githubie faktycznie uważają, że jest to rozwiązanie, ale nie podali konkretnie jak to zastosować. Dla laika w js jest to uciążliwy problem. 

/*
	Author : Arif Setyawan

	This function must used together with ChartJS. Or it must 
	load chartjs first before this menu to be work
*/

function respChart(selector, data, options){

	// Define default option for line chart
	var option = {
		scaleOverlay : false,
		scaleOverride : false,
		scaleSteps : null,
		scaleStepWidth : null,
		scaleStartValue : null,
		scaleLineColor : "rgba(0,0,0,.1)",
		scaleLineWidth : 1,
		scaleShowLabels : true,
		scaleLabel : "<%=value%>",
		scaleFontFamily : "'proxima-nova'",
		scaleFontSize : 10,
		scaleFontStyle : "normal",
		scaleFontColor : "#909090",	
		scaleShowGridLines : true,
		scaleGridLineColor : "rgba(0,0,0,.05)",
		scaleGridLineWidth : 1,	
		bezierCurve : true,
		pointDot : true,
		pointDotRadius : 3,
		pointDotStrokeWidth : 1,
		datasetStroke : true,
		datasetStrokeWidth : 2,
		datasetFill : true,
		animation : true,
		animationSteps : 60,
		animationEasing : "easeOutQuart",
		onAnimationComplete : null
	}

	// check if the option is override to exact options 
	// (bar, pie and other)
	if (options == false || options == null){
		options = option;
	} 

	// get selector by context
	var ctx = selector.get(0).getContext("2d");
	// pointing parent container to make chart js inherit its width
	var container = $(selector).parent();

	// enable resizing matter
	$(window).resize( generateChart );

	// this function produce the responsive Chart JS
	function generateChart(){
		// make chart width fit with its container
		var ww = selector.attr('width', $(container).width() );
		// Initiate new chart or Redraw

               // TUTAJ NIE DZIAŁA
		var min = _.max(data.datasets[0].data) 
		var max = _.min(data.datasets[0].data) 

		if (max == min) {
			options.scaleOverride : true;
			options.scaleSteps : 3;
			options.scaleStepWidth : 1;
			options.scaleStartValue : max - 2;
		}

		new Chart(ctx).Bar(data, options);
	};

	// run function - render chart at first load
	generateChart();

}

Nie działa w miejscu w którym go dałeś? Jeżeli nie to spróbuj min i max zamienić odpowiednio na:

var min = Math.max(data.datasets[0].data)