Как сгенерировать сложенный бар спарклайн хай-чартов?

Question

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

$('[data-sparkline]').each(function(){
    var data=$(this).data('sparkline').trim().split(',').map(Number);
    $(this).highcharts('SparkLine', {
      series: [{
        data:data ,
        type: "bar"
      }],
        plotOptions: {
          series: {
              stacking: normal
          }
        }
    })
});

<tbody id="tbody-sparkline">
{% for x in data %}
<tr>
    <td><a href="team/{{ x[0] }}">{{ x[0] }}</a></td>
    <td>{{ x[1] }}</td>
    <td>{{ '{0:0.2f}'.format(x[2]) }}</td>
    <td>{{ '{0:0.2f}'.format(x[3]) }}</td>
    <td>{{ '{0:0.2f}'.format(x[4]) }}</td>
    <td>{{ '{0:0.2f}'.format(x[5]) }}</td>
    <td data-sparkline="{{ '{0:0.2f}'.format(x[3]) }}, {{ '{0:0.2f}'.format(x[4]) }}, {{ '{0:0.2f}'.format(x[5]) }} "></td>
</tr>
{% endfor %}
</tbody>

Любая помощь приветствуется!

Answer 1

Я расскажу, как превратить их демо в спарклайны со сгруппированной полосой.Это все еще просто «простые Highcharts», но некоторые модификации должны быть сделаны.Для укладки нужно поддерживать несколько серий.Чтобы сделать это в своем примере, вот измененный <td>:

<td data-sparkline="71, 78, 39, 66 ; 87, 44, 74, 41 ; 58, -10, 1, 16"/>

И измененные параметры:

chart: {
  type: 'bar',
  // ...
},
plotOptions: {
  series: {
    stacking: 'normal',
    // ...
  }
}

Измененный doChunk, который преобразует arr в series вместо data, поскольку существует несколько серий:

function doChunk() {
  var time = +new Date(),
      i,
      j,
      len = $tds.length,
      $td,
      stringdata,
      arr,
      series,
      chart;
  console.log(series);

  for (i = 0; i < len; i += 1) {
    $td = $($tds[i]);
    stringdata = $td.data('sparkline');
    arr = stringdata.split('; ');
    series = [];
    for(j = 0; j < arr.length; j++) {
      series.push({
        data: $.map(arr[j].split(', '), parseFloat),
        pointStart: 1
      });
    }


    chart = {};

    $td.highcharts('SparkLine', {
      series: series,
      tooltip: {
        headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
        pointFormat: '<b>{point.y}.000</b> USD'
      },
      chart: chart
    });

    n += 1;

    // If the process takes too much time, run a timeout to allow interaction with the browser
    if (new Date() - time > 500) {
      $tds.splice(0, i + 1);
      setTimeout(doChunk, 0);
      break;
    }

    // Print a feedback on the performance
    if (n === fullLen) {
      $('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
    }
  }
}

См. эту демонстрацию JSFiddle модифицированного примера Sparkline (посмотрите на Алабаму).Обратите внимание, что этот пример формата не поддерживает спецификацию типа диаграммы, поскольку он использует все arr для обработки серий.