Anda memiliki tabel html dan Anda ingin menampilkan grafik grafik mini dari data Anda, persis seperti dalam contoh ini (dari demo grafik tinggi):

https://codepen.io/_dario/pen/rNBOGVR

Kode yang disarankan Highcharts berikut:

/**
 * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
 * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
 */
Highcharts.SparkLine = function(a, b, c) {
  var hasRenderToArg = typeof a === 'string' || a.nodeName,
    options = arguments[hasRenderToArg ? 1 : 0],
    defaultOptions = {
      chart: {
        renderTo: (options.chart && options.chart.renderTo) || this,
        backgroundColor: null,
        borderWidth: 0,
        type: 'area',
        margin: [2, 0, 2, 0],
        width: 120,
        height: 20,
        style: {
          overflow: 'visible'
        },

        // small optimalization, saves 1-2 ms each sparkline
        skipClone: true
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      xAxis: {
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        startOnTick: false,
        endOnTick: false,
        tickPositions: []
      },
      yAxis: {
        endOnTick: false,
        startOnTick: false,
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        tickPositions: [0]
      },
      legend: {
        enabled: false
      },
      tooltip: {
        hideDelay: 0,
        outside: true,
        shared: true
      },
      plotOptions: {
        series: {
          animation: false,
          lineWidth: 1,
          shadow: false,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          marker: {
            radius: 1,
            states: {
              hover: {
                radius: 2
              }
            }
          },
          fillOpacity: 0.25
        },
        column: {
          negativeColor: '#910000',
          borderColor: 'silver'
        }
      }
    };

  options = Highcharts.merge(defaultOptions, options);

  return hasRenderToArg ?
    new Highcharts.Chart(a, options, c) :
    new Highcharts.Chart(options, b);
};

var start = +new Date(),
  $tds = $('td[data-sparkline]'),
  fullLen = $tds.length,
  n = 0;

// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function doChunk() {
  var time = +new Date(),
    i,
    len = $tds.length,
    $td,
    stringdata,
    arr,
    data,
    chart;

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

    if (arr[1]) {
      chart.type = arr[1];
    }
    $td.highcharts('SparkLine', {
      series: [{
        data: data,
        pointStart: 1
      }],
      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');
    }
  }
}
doChunk();

Namun, dalam kasus penggunaan saya, data dalam tabel (dan atribut data-sparkline) tidak di-hard-code seperti pada contoh, tetapi dimuat dan ditampilkan melalui panggilan AJAX, mirip dengan di bawah ini.

//here a table row gets compiled
var tableRow = '<tr id="row_' + word.id + '">';

//this is where the sparkline data go
tableRow += '<td class="has-sparkline"></td></tr>';

//the row gets appended to tbody
$('#wordstable tbody').append(tableRow);

//finally the sparkline data are attached
//data are a simple string such as "1,2,3,4,5"

var rowId = '#row_'+word.id;
var rowIdTd = rowId + ' td.has-sparkline';
$(rowIdTd).data('sparkline',word.sparkline);

Ini merusak logika contoh dan saya tidak dapat membuat Highcharts "melihat" data.

Tidak ada kesalahan tertentu yang dikembalikan (sebagai data, sejauh menyangkut Highcharts, tidak ada di sana, jadi tidak ada yang bisa dilakukan).

1
qqg 13 Agustus 2019, 07:03

1 menjawab

Jawaban Terbaik

Bit doChunk hanya melakukan semua pemrosesan terlebih dahulu, dan ketika Anda menambahkan baris Anda, itu tidak lagi diproses. Salah satu cara untuk mengatasinya adalah dengan menarik bagian yang membuat satu bagan ke dalam fungsi terpisah (makeChart) dan ketika Anda melakukan pemrosesan, Anda menggunakan bagian itu secara langsung untuk membuat grafik mini Anda.

Misalnya, doChunk dengan pemisahan makeChart:

function makeChart(td) {
    $td = td;
    stringdata = $td.data('sparkline');
    arr = stringdata.split('; ');
    data = $.map(arr[0].split(', '), parseFloat);
    chart = {};

    if (arr[1]) {
      chart.type = arr[1];
    }
    $td.highcharts('SparkLine', {
      series: [{
        data: data,
        pointStart: 1
      }],
      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
    });

}

// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function doChunk() {
  var time = +new Date(),
    i,
    len = $tds.length,
    $td,
    stringdata,
    arr,
    data,
    chart;

  for (i = 0; i < len; i += 1) {
    makeChart($($tds[i]));

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

Dan kemudian contoh dasar kode ajax Anda:

function ajaxIsh() {
    var word = {
    name: 'Bird', // is the word
    id: 'bird',
    sparkline: '1, 2, 3, 4, 5'
  };

  //here a table row gets compiled
  var tableRow = '<tr id="row_' + word.id + '">';

  //this is where the sparkline data go
  tableRow += '<th>'+word.name+'</th><td class="has-sparkline"></td></tr>';

  //the row gets appended to tbody
  $('#table-sparkline tbody').append(tableRow);

  //finally the sparkline data are attached
  //data are a simple string such as "1,2,3,4,5"

  var rowId = '#row_'+word.id;
  var rowIdTd = rowId + ' td.has-sparkline';
  $(rowIdTd).data('sparkline',word.sparkline);

  makeChart($(rowIdTd));
}

Lihat demonstrasi JSFiddle ini tentang aksinya.

1
Halvor Holsten Strand 13 Agustus 2019, 10:53