使用下拉过滤器动态更新 Highchart

Question

目前我正在尝试在我的图表上添加一个下拉过滤器按钮，让用户 select 来自数据属性的特定值并过滤图表上显示的相关数据。

我将我的数据属性填充到 select 单元，我试图通过解析来自 selective 值的数据来更新图表，但数据似乎没有更新HighChart.

这是我的代码： jsfiddle

const data = [
{
    "Data": "aaa",
    "Media": "1",
    "Row": "1",
    "Column": "3",
    "Code": "24",
},
{
    "Data": "aaa",
    "Media": "2",
    "Row": "1",
    "Column": "1",
    "Code": "24",
},
{
    "Data": "aaa",
    "Media": "3",
    "Row": "1",
    "Column": "3",
    "Code": "24",
},
{
    "Data": "aaa",
    "Media": "4",
    "Row": "1",
    "Column": "2",
    "Code": "24",
},
{
    "Data": "aaa",
    "Media": "1",
    "Row": "2",
    "Column": "1",
    "Code": "24",
},

    // populate Media to dropdown list
$.each(data, function (index, record) {
    $('<option>', {
        value: record.Media,
        text: record.Media
    }).appendTo("#select_media");
});

// remove duplicate value from dropdown list
var optionValues =[];
$('#select_media option').each(function(){
if($.inArray(this.value, optionValues) >-1){
    $(this).remove()
}else{
    optionValues.push(this.value);
}
});

// getting drop down list value
var mediaselect = document.getElementById("select_media").value


mediaselect_str = String(mediaselect)

const parsedData = []
data.forEach(obj => {
    if (obj.Media == mediaselect_str) {
    parsedData.push({
        x: parseInt(obj.Row),
        y: parseInt(obj.Column),
        label: [obj.Data, obj.Media, obj.Code]
    })
    }
});

var chart = Highcharts.chart('tray_container', {
    chart: {
        type: 'heatmap',
        width: 500,
        height: 500,            
    
    },
    title: {
        text: null
    },
    plotOptions: {
        heatmap: {
            borderColor: "black",
            paddingRight: 100
        },
    },
    series: [{
        name: null,
        borderWidth: 1,
        data: parsedData,
        dataLabels: {
            inside: true,//Show 
            enabled: true,
            useHTML: true,
            opacity: 1,
            verticalAlign:'middle',
            align: 'center',
            style: {
                textShadow: 'none',
                HcTextStroke: null,
                display: 'block'
        },
            formatter: function() {
            const label = this.point.label;
            return `${label[1]} <br/> ${label[2]} <br/> ${label[0]}`
            }
        },
    }]
});

我做错了什么吗？谢谢。

============================================= ====================

更新：JMS 的解决方案工作得很好，但在我的真实情况下，我的 json 数据是从某个地方调用的，所以这将是一个函数。基于 JMS 的方法，结果是当我从下拉列表中创建 selection 时，它找不到 update() 函数，因为它嵌套在我的函数中。抱歉，我在 javascript 中还是新手，我不知道如何解决它。

function generate_chart(data) {
// populate Media to dropdown list
$.each(data, function (index, record) {
    $('<option>', {
        value: record.Media,
        text: record.Media
    }).appendTo("#select_media");
});

// remove duplicate value from dropdown list
var optionValues =[];
$('#select_media option').each(function(){
if($.inArray(this.value, optionValues) >-1){
    $(this).remove()
}else{
    optionValues.push(this.value);
}
});

update();
function update() {
// find the maximun of x & y values by row and column
var max_x = Math.max.apply(Math, fildata.map(function(mx) {
    return mx.OutputRow;
}))
var max_y = Math.max.apply(Math, fildata.map(function(my) {
    return my.OutputColumn;
}))
console.log(max_x, max_y)

// assign x & y axis array with the maxiumn 
var x = Array(max_x).fill().map((element, index) => index)
var y = Array(max_y).fill().map((element, index) => index)


// getting drop down list value
var mediaselect = document.getElementById("select_media").value


mediaselect_str = String(mediaselect)

const parsedData = []
data.forEach(obj => {
    if (obj.Media == mediaselect_str) {
    parsedData.push({
        x: parseInt(obj.Row),
        y: parseInt(obj.Column),
        label: [obj.Data, obj.Media, obj.Code]
    })
    }
});

var chart = Highcharts.chart('tray_container', {
    chart: {
        type: 'heatmap',
        width: 500,
        height: 500,            
    
    },
    title: {
        text: null
    },
    plotOptions: {
        heatmap: {
            borderColor: "black",
            paddingRight: 100
        },
    },
    series: [{
        name: null,
        borderWidth: 1,
        data: parsedData,
        dataLabels: {
            inside: true,//Show 
            enabled: true,
            useHTML: true,
            opacity: 1,
            verticalAlign:'middle',
            align: 'center',
            style: {
                textShadow: 'none',
                HcTextStroke: null,
                display: 'block'
        },
            formatter: function() {
            const label = this.point.label;
            return `${label[1]} <br/> ${label[2]} <br/> ${label[0]}`
            }
        },
    }]
});
}

Answer 1

您从未订阅下拉列表的更改，因此数据不会更改。

在下拉列表中添加一个 onchange 侦听器

 <select id="select_media" onchange="update()" >

将您的更新逻辑放入 function update() 函数

function update() {
   // getting drop down list value
   var mediaselect = document.getElementById("select_media").value
   mediaselect_str = String(mediaselect)

   const parsedData = []
   data.forEach(obj => {
       if (obj.Media == mediaselect_str) {
       parsedData.push({
           x: parseInt(obj.Row),
           y: parseInt(obj.Column),
           label: [obj.Data, obj.Media, obj.Code]
       })
       }
   });

   var chart = Highcharts.chart('tray_container', {
       chart: {
           type: 'heatmap',
           width: 500,
           height: 500,            
       
       },
       title: {
           text: null
       },
       plotOptions: {
           heatmap: {
               borderColor: "black",
               paddingRight: 100
           },
       },
       series: [{
           name: null,
           borderWidth: 1,
           data: parsedData,
           dataLabels: {
               inside: true,//Show 
               enabled: true,
               useHTML: true,
               opacity: 1,
               verticalAlign:'middle',
               align: 'center',
               style: {
                   textShadow: 'none',
                   HcTextStroke: null,
                   display: 'block'
           },
               formatter: function() {
               const label = this.point.label;
               return `${label[1]} <br/> ${label[2]} <br/> ${label[0]}`
               }
           },
       }]
   });
  }

在开始时自己调用 update() 一次，以获取初始图表

在此处查看工作 fiddle：http://jsfiddle.net/ran2vz7s/3/

Answer 2

update() 将是不错的选择，下面是展示如何使用 select 元素更改图表数据的演示。

const data = {
  data1: [
    [0, 0, 10],
    [0, 1, 19],
    [0, 2, 8],
    [0, 3, 24],
    [0, 4, 67],
    [1, 0, 92],
  ],

  data2: [
    [1, 1, 58],
    [1, 2, 78],
    [1, 3, 117],
    [1, 4, 48],
    [2, 0, 35],
    [2, 1, 15],
  ],

  data3: [
    [2, 2, 123],
    [2, 3, 64],
    [2, 4, 52],
    [3, 0, 72],
    [3, 1, 132],
    [3, 2, 114],
  ]
}


const chart = Highcharts.chart('container', {
  chart: {
    type: 'heatmap'
  },
  series: [{
    data: data.data1
  }]
});

var select = document.getElementById('select');

select.addEventListener('change', function() {
  chart.series[0].update({
    data: data[this.value]
  });
});

演示：https://jsfiddle.net/BlackLabel/m84f3spx/

API 参考资料： https://api.highcharts.com/class-reference/Highcharts.Chart#update

使用下拉过滤器动态更新 Highchart

Using dropdown filter to dynamic update Highchart

javascript

json

highcharts