Question

我希望能够显示我的图表以响应我的数据表搜索和/或排序的变化，如本例中使用highcharts所示

使用Highcharts.js的数据可视化DataTables.js。

<a href="https://codepen.io/tutsplus/pen/GMVapQ">

<div class="container">
  <table id="dt-table">
    <thead>
      <tr>
        <th>Country</th>
        <th>Population (2017)</th>
        <th>Density (P/Km²)</th>
        <th>Med. Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>China</td>
        <td>1,409,517,397</td>
        <td>150 </td>
        <td>37</td>
      </tr> more code on site ....

我目前正在使用mdbootstrap，PHP，MySQL，datatables。

是否有可能使用chart.js获得相同的结果？如果有，是否有任何编码示例，或者我应该使用此codepen示例作为我的chart.js可视化的起点，方法是将highcharts编码更改为图表。相当于js。

非常感谢提前。

科林

Answer 1

我对饼图做了类似的事情，以将价值划分显示在单个列中。我认为您可以轻松地对其进行编辑以使用其他图形类型，尽管图形和表格之间没有完美的对称性。

$(document).on('dblclick', '.dataTable td', function () {
    let index = $(this).index();
    let col = $(this).closest('.dataTable').DataTable().columns(index).data()[0].sort();
    let groups = col.groupBy(function (v) {
        return v;
    });

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: groups.map(x => x.group.length),
                backgroundColor: groups.map(x => getRGBAColorFromString(x.group[0])),
                label: "pie"
            }],
            labels: groups.map(x => x.group[0])
        },
        options: {
            responsive: true
        }
    };

    //display you chart here
    //....
    let ctx = document.getElementById('canvasId').getContext('2d');
    window.myPie = new Chart(ctx, config);
});

请注意，绘制图表所用的元素必须是画布。另外，我使用了'dblclick'事件，根据您自己的需要进行更改。

js中的groupBy代码看起来像这样：

Array.prototype.groupBy = function (hash) {
    var _hash = hash ? hash : function (o) { return o; };

    var _map = {};
    var put = function (map, key, value) {
        if (!map[_hash(key)]) {
            map[_hash(key)] = {};
            map[_hash(key)].group = [];
            map[_hash(key)].key = key;
        }
        map[_hash(key)].group.push(value);
    }

    this.map(function (obj) {
        put(_map, obj, obj);
    });

    return Object.keys(_map).map(function (key) {
        return { key: _map[key].key, group: _map[key].group };
    });
}

可能想要使用类似的颜色作为颜色。可以更改逻辑（要在我们的应用上仅生成明亮的颜色，因此是％67和+189）

function getRGBAColorFromString(s) {
    if (!s) return "#fff";
    let sum = 0;
    for (i = 0; i < s.length; i++) {
        sum += s.charCodeAt(i);
    }
    let r = sum * 31 % 67;
    let g = sum * 17 % 67;
    let b = sum * 51 % 67;
   return "rgba(" + (r + 189) + "," + (g + 189) + "," + (b + 189) + ", 1)";
}

希望这会有所帮助：D

欢呼

使用chart.js

1 个答案: