如何生成highcharts堆叠条形火花线？

Question

我想要在水平堆积条形图中绘制三个值，但我不确定如何将demo here的堆叠特性与demo here中的迷你线相结合。当我加载页面时，迷你图列中没有显示任何内容。

$('[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');
    }
  }
}

请参阅修改后的Sparkline示例的this JSFiddle demo（查看Alabama）。请注意，此示例格式不支持图表类型规范，因为它使用所有arr进行系列处理。