Как изменить порядок элементов легенды при использовании графических элементов? - PullRequest
Новая
       21

Как изменить порядок элементов легенды при использовании графических элементов?

1 голос
/ 26 марта 2020

У меня есть серия из 5 участков для рисования на одной фигуре. Я использую графики для этого.

Я хочу, чтобы легенда отображалась в обратном порядке, но я не хочу менять мой файл .csv. Я не нашел ничего, чтобы решить эту проблему на странице документации dygraphs.

Пожалуйста, помогите мне с выходом.

Код выглядит следующим образом: 

 <script type="text/javascript"  src="dygraph.js"></script>
 <link rel="stylesheet" src="dygraph.css" />
 <div id="graphdiv3"  style="width:1000px; height:300px;"></div>
 <div id="status", class="status"></div>
 <script>
  var g3 = new Dygraph(
     document.getElementById("graphdiv3"),
     "data/area.csv",
      {labelsDiv: document.getElementById('status'),
      labelsSeparateLines: true,
      labelsKMB: true,
      legend: 'always',
      xlabel: 'Date',
      ylabel: 'Area',
      drawGrid: false,
      rollPeriod: 10,
      showRoller: true,
      fillGraph: true,
      fillAlpha: 1.0,
      showRangeSelector: true,
      interactionModel: Dygraph.defaultInteractionModel,
   }
)

Ответы [ 3 ]

1 голос
/ 26 марта 2020

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

function legendFormatter(data, ...args) {
  const html = Dygraph.Plugins.Legend.defaultFormatter(data, ...args);
  let lines = html.split(/<br\/?>/);
  if (data.x == null) {
    lines.reverse();
  } else {
    lines = [lines[0], ...lines.slice(1).reverse()];
  }
  return lines.join('<br>');
}

var csv = btoa(`Year-month,class1,class2,class3,class5,class6
1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632
1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059
1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639
1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517
1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591
1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446
1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316
1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639
1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219
1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654
1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245
1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`);

var g3 = new Dygraph(
  document.getElementById("graphdiv3"),
  'data:application/text+csv;base64,' + csv, {
    labelsDiv: document.getElementById('status'),
    labelsSeparateLines: true,
    labelsKMB: true,
    legend: 'always',
    xlabel: 'Date',
    ylabel: 'Area',
    drawGrid: false,
    rollPeriod: 10,
    showRoller: true,
    fillGraph: true,
    fillAlpha: 1.0,
    showRangeSelector: true,
    interactionModel: Dygraph.defaultInteractionModel,
    legendFormatter: legendFormatter
  }
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" rel="stylesheet" />

<div id="graphdiv3" style="width:1000px; height:300px;"></div>
<div id="status" class="status"></div>

Для более сложных преобразований вам лучше будет конструктивно построить HTML. Для примера посмотрите исходный код демо legendFormatter .

1 голос
/ 26 марта 2020

Вы можете предоставить свой собственный рендерер легенды, но изменение Ko sh CSS намного проще.

В любом случае, если вы посмотрите на исходный код Dygraph, вы заметите, что в самом конце функции stati c Legend.generateLegendHTML есть проверка для этой опции: g.getOption('legendFormatter').

Это означает, что вы можете предоставить свою собственную версию Legend.defaultFormatter.

Все, что я сделал, это изменил два места, на которые ссылаются data.series, и вместо этого вызвал data.series.reverse(). Кроме того, я немного поразил его и сделал его более дружественным к ES6. 

{
  legendFormatter: reverseLegendFormatter
}

const csv = btoa(`Year-month,class1,class2,class3,class5,class6
1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632
1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059
1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639
1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517
1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591
1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446
1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316
1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639
1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219
1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654
1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245
1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`);

const g3 = new Dygraph(
  document.getElementById("graphdiv3"),
  'data:application/text+csv;base64,' + csv, {
    labelsDiv: document.getElementById('status'),
    labelsSeparateLines: true,
    labelsKMB: true,
    legend: 'always',
    xlabel: 'Date',
    ylabel: 'Area',
    drawGrid: false,
    rollPeriod: 10,
    showRoller: true,
    fillGraph: true,
    fillAlpha: 1.0,
    showRangeSelector: true,
    interactionModel: Dygraph.defaultInteractionModel,
    legendFormatter: reverseLegendFormatter
  }
)

function reverseLegendFormatter(data) {
  let g = data.dygraph;
  if (g.getOption('showLabelsOnHighlight') !== true) return '';
  let sepLines = g.getOption('labelsSeparateLines'), htmlLines = [];
  if (typeof data.x === 'undefined') {
    if (g.getOption('legend') != 'always') return '';
    data.series.reverse()
      .filter(series => series.isVisible)
      .forEach(series => {
        htmlLines.push(`
          <span style="font-weight:bold; color:${series.color}">
            ${series.dashHTML} ${series.labelHTML}
          </span>
        `);
      });
  } else {
    htmlLines.push(`${data.xHTML}:`);
    data.series.reverse()
      .filter(series => series.isVisible)
      .forEach(series => {
        htmlLines.push(`
          <span${ series.isHighlighted ? ' class="highlight"' : '' }>
            <b><span style="color: ${series.color}">${series.labelHTML}</span></b>:
            &#160;${series.yHTML}
          </span>
        `);
      });
  }
  return htmlLines.join(sepLines ? '<br />' : '');
}

Демо 

const csv = btoa(`Year-month,class1,class2,class3,class5,class6
1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632
1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059
1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639
1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517
1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591
1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446
1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316
1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639
1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219
1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654
1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245
1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`);

const g3 = new Dygraph(
  document.getElementById("graphdiv3"),
  'data:application/text+csv;base64,' + csv, {
    labelsDiv: document.getElementById('status'),
    labelsSeparateLines: true,
    labelsKMB: true,
    legend: 'always',
    xlabel: 'Date',
    ylabel: 'Area',
    drawGrid: false,
    rollPeriod: 10,
    showRoller: true,
    fillGraph: true,
    fillAlpha: 1.0,
    showRangeSelector: true,
    interactionModel: Dygraph.defaultInteractionModel,
    legendFormatter: reverseLegendFormatter,
    labelsSeparateLines: false // Really shines here!
  }
)

function reverseLegendFormatter(data) {
  let g = data.dygraph;
  if (g.getOption('showLabelsOnHighlight') !== true) return '';
  let sepLines = g.getOption('labelsSeparateLines'), htmlLines = [];
  if (typeof data.x === 'undefined') {
    if (g.getOption('legend') != 'always') return '';
    data.series.reverse()
      .filter(series => series.isVisible)
      .forEach(series => {
        htmlLines.push(`
          <span style="font-weight:bold; color:${series.color}">
            ${series.dashHTML} ${series.labelHTML}
          </span>
        `);
      });
  } else {
    htmlLines.push(`${data.xHTML}:`);
    data.series.reverse()
      .filter(series => series.isVisible)
      .forEach(series => {
        htmlLines.push(`
          <span${ series.isHighlighted ? ' class="highlight"' : '' }>
            <b><span style="color: ${series.color}">${series.labelHTML}</span></b>:
            &#160;${series.yHTML}
          </span>
        `);
      });
  }
  return htmlLines.join(sepLines ? '<br />' : '');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" rel="stylesheet" />

<div id="graphdiv3" style="width:1000px; height:300px;"></div>
<div id="status" class="status"></div>
1 голос
/ 26 марта 2020

Вы можете использовать flex и наоборот flex-direction: 

var csv = btoa(`Year-month,class1,class2,class3,class5,class6
1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632
1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059
1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639
1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517
1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591
1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446
1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316
1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639
1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219
1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654
1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245
1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`);

var g3 = new Dygraph(
  document.getElementById("graphdiv3"),
  'data:application/text+csv;base64,' + csv, {
    labelsDiv: document.getElementById('status'),
    labelsSeparateLines: true,
    labelsKMB: true,
    legend: 'always',
    xlabel: 'Date',
    ylabel: 'Area',
    drawGrid: false,
    rollPeriod: 10,
    showRoller: true,
    fillGraph: true,
    fillAlpha: 1.0,
    showRangeSelector: true,
    interactionModel: Dygraph.defaultInteractionModel,
  }
)
#status {display:flex; flex-direction:column-reverse}
#status span {order:-1}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" rel="stylesheet" />

<div id="graphdiv3" style="width:1000px; height:300px;"></div>
<div id="status" class="status"></div>
...