dygraph - 막 대형 차트의 시리즈 이름을 변경하는 방법

Question

3 개 막대 차트가 있지만 이름을 변경할 수 없습니다. 코드에서 내 이름이 아니라 y1 y2 y2 만 있습니다. 예제 bar chart에 따르면 Multi-columnBarChart를 사용해야하는데, 어떻게 할 수 있습니까?

function multiColumnBarPlotter(e) { 
    // We need to handle all the series simultaneously. 
    if (e.seriesIndex !== 0) return; 

    var g = e.dygraph; 
    var ctx = e.drawingContext; 
    var sets = e.allSeriesPoints; 
    var y_bottom = e.dygraph.toDomYCoord(0); 

    // Find the minimum separation between x-values. 
    // This determines the bar width. 
    var min_sep = Infinity; 
    for (var j = 0; j < sets.length; j++) { 
    var points = sets[j]; 
    for (var i = 1; i < points.length; i++) { 
     var sep = points[i].canvasx - points[i - 1].canvasx; 
     if (sep < min_sep) min_sep = sep; 
    } 
    } 
    var bar_width = Math.floor(2.0/3 * min_sep); 

여기 내 코드입니다 :

function barChartPlotter(e) { 
    var ctx = e.drawingContext; 
    var points = e.points; 
    var y_bottom = e.dygraph.toDomYCoord(0); 

    // The RGBColorParser class is provided by rgbcolor.js, which is 
    // packed in with dygraphs. 
    var color = new RGBColorParser(e.color); 
    color.r = Math.floor((255 + color.r)/2); 
    color.g = Math.floor((255 + color.g)/2); 
    color.b = Math.floor((255 + color.b)/2); 
    ctx.fillStyle = color.toRGB(); 

    // Find the minimum separation between x-values. 
    // This determines the bar width. 
    var min_sep = Infinity; 
    for (var i = 1; i < points.length; i++) { 
     var sep = points[i].canvasx - points[i - 1].canvasx; 
     if (sep < min_sep) min_sep = sep; 
    } 
    var bar_width = Math.floor(2.0/3 * min_sep); 

    // Do the actual plotting. 
    for (var i = 0; i < points.length; i++) { 
     var p = points[i]; 
     var center_x = p.canvasx; 

     ctx.fillRect(center_x - bar_width/2, p.canvasy, 
      bar_width, y_bottom - p.canvasy); 

     ctx.strokeRect(center_x - bar_width/2, p.canvasy, 
      bar_width, y_bottom - p.canvasy); 
    } 
    } 

data = []; 
var x = js_array.length; 
// CONVERTATION 
pass = []; 
fail = []; 
tree = []; 
for (var i=0; i<x; i++){ 
    if (js_array[i] == 1) { 
     pass.push(js_array[i]); 
     fail.push(NaN); 
     tree.push(NaN); 
     } 
    else if (js_array[i] == 2) { 
     pass.push(NaN); 
     fail.push(js_array[i]); 
     tree.push(NaN); 
     } 

    else if (js_array[i] == 3) { 
     pass.push(NaN); 
     fail.push(NaN); 
     tree.push(js_array[i]); 
     } 
    } 

// DATA 
for (var i=0; i<x; i++){ 
    var y = x - i - 1; 
    data.push([new Date(js_array_time[y]), pass[y], fail[y], tree[y]]); 
    } 

seriesName = ['x','PASS', 'FAIL', 'TREE'] 
// OPTIONS 
var start = new Date(js_array_time[9]); 
var stop = new Date(js_array_time[0]); 
start.setMinutes(start.getMinutes() - 10); 
stop.setMinutes(stop.getMinutes() + 10); 

s = document.getElementById("s"); 

g = new Dygraph(
document.getElementById("graphdiv"), 
data, 
{ 
    width: 580, 
      includeZero: true, 
      animatedZooms: true, 
      plotter: barChartPlotter, 
    axisLineWidth: 0.001, 
    //labels: seriesName, 
     legend: 'always', 
     title: 'Test results', 
    drawYAxis:false, 
    valueRange: [0.5, 3.5], 
    dateWindow: [Date.parse(start), Date.parse(stop)], 
    pointClickCallback: function(e, p) { 
       //s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.xval + "<br/>"; 
     window.open('../RUNNER/_VLOGS/launch' + p.xval + '.html','_blank'); 
     window.open('../RUNNER/_LOGS/launch_log' + p.xval + '.txt','_blank'); 
       }, 
    //drawPoints: true, 
    //drawXGrid: false, 
    //drawYGrid: false, 
    //fillGraph: true 

    } 
); 

g.ready(function() { 
    g.setAnnotations([ 
    { 

    }]); 
}); 

Answer 1

여러 시리즈를 들어, 대신 points의 allSeriesPoints를 얻을 필요가 여기에 예를 다 columnBarChart에서 주석입니다.

function multiColumnBarPlotter(e) { 
    // We need to handle all the series simultaneously. 
    if (e.seriesIndex !== 0) return; 

    var g = e.dygraph; 
    var ctx = e.drawingContext; 
    var sets = e.allSeriesPoints; 
    var y_bottom = e.dygraph.toDomYCoord(0); 

    // Find the minimum separation between x-values. 
    // This determines the bar width. 
    var min_sep = Infinity; 
    for (var j = 0; j < sets.length; j++) { 
    var points = sets[j]; 
    for (var i = 1; i < points.length; i++) { 
     var sep = points[i].canvasx - points[i - 1].canvasx; 
     if (sep < min_sep) min_sep = sep; 
    } 
    } 
    var bar_width = Math.floor(2.0/3 * min_sep); 

    var fillColors = []; 
    var strokeColors = g.getColors(); 
    for (var i = 0; i < strokeColors.length; i++) { 
    var color = new RGBColorParser(strokeColors[i]); 
    color.r = Math.floor((255 + color.r)/2); 
    color.g = Math.floor((255 + color.g)/2); 
    color.b = Math.floor((255 + color.b)/2); 
    fillColors.push(color.toRGB()); 
    } 

    for (var j = 0; j < sets.length; j++) { 
    ctx.fillStyle = fillColors[j]; 
    ctx.strokeStyle = strokeColors[j]; 
    for (var i = 0; i < sets[j].length; i++) { 
     var p = sets[j][i]; 
     var center_x = p.canvasx; 
     var x_left = center_x - (bar_width/1.3) * (1 - j/(sets.length-1)); 

     ctx.fillRect(x_left, p.canvasy, 
      bar_width/sets.length, y_bottom - p.canvasy); 

     ctx.strokeRect(x_left, p.canvasy, 
      bar_width/sets.length, y_bottom - p.canvasy); 
    } 
    } 
} 

I하십시오 jsFiddle.com

플로터 코드는 다음과 같습니다에 DEMO을하고있다 여기에

: 여기 또 다른 SO 질문을 함께 넣어 예입니다 동일한 데이터의 두 차트를 만드십시오. 하나는 CSV를 사용하고 다른 하나는 어레이를 사용합니다. csv로 배열 들어, 레이블 속성에 라벨을 변경할 수 있습니다 직접 데이터 레이블을 제공

이

labels: ['x', 'series1', 'series2', 'series3'], 

전체 차트 코드는 다음

g2 = new Dygraph(document.getElementById("g_div2"), 
       theData, 
        { 
        // options go here. See http://dygraphs.com/options.html 
        legend: 'always', 
        labels: ['x', 'series1', 'series2', 'series3'], 
        animatedZooms: true, 
        plotter: multiColumnBarPlotter, 
        colors: ["#00A0B0", "#6A4A3C", "#CC333F", ], 
        dateWindow: [0, 8] 
       });