如何在highcharts的基本列图中隐藏/显示列？

我试图在高图图表中显示/隐藏一个列（包含所有相关点）。

例如，请考虑以下图： jsfiddle 。

我希望用户能够单击“Sep”列，隐藏它，相应地重新缩放轴（x和y轴）。

不幸的是，我不是javascript / jquery的专家。 所以我想知道是否可以这样做，以及如何做到这一点。

谢谢你的帮助！

这是小提琴的代码：

$(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '{point.key}', pointFormat: '' + '', footerFormat: '
{series.name}: 
{point.y:.1f} mm
', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Tokyo', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { name: 'New York', data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }, { name: 'London', data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] }, { name: 'Berlin', data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] }] }); }); 

Answer 1

这是来自Daker和jsfiddle的解决方案。

HTML

 
  Hide third category Show third category 

JavaScript的

 var point = { x: null, y: null }; var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ type: 'column', name: 'third', data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1], }] }); $('#b4').click(function () { var no = 2; //third element // removed march, hoping we'd only show 11 months... chart.xAxis[0].setCategories(['Jan', 'Feb', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], false); var data = []; for (i = 0; i < chart.series[0].data.length; i++) { if (i < no) { data.push([chart.series[0].data[i].x, chart.series[0].data[i].y]); } else if (i === no) { point.x = chart.series[0].data[i].x; point.y = chart.series[0].data[i].y; } else if (i > no) { data.push([chart.series[0].data[i].x - 1, chart.series[0].data[i].y]); } } chart.series[0].setData(data); }); $('#b5').click(function () { var no = 2; //third element var data = []; for (i = 0; i < chart.series[0].data.length; i++) { if (i < no) { data.push([chart.series[0].data[i].x, chart.series[0].data[i].y]); } else if (i === no) { data.push([point.x, point.y]); data.push([chart.series[0].data[i].x + 1, chart.series[0].data[i].y]); } else if (i > no) { data.push([chart.series[0].data[i].x + 1, chart.series[0].data[i].y]); } } chart.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); chart.series[0].setData(data); }); 

Answer 2

要使用分组条形图执行此操作，您需要创建一个自定义函数

1）从图表中删除数据系列

2）重建数据系列，删除点击的数据点

3）将系列重新添加到图表中

和，

4）您需要构建一些模仿图例的外部控件，以便用户仍然可以点击某些内容以重新显示已删除的数据。 否则，当您重新缩放轴时，将删除标签，并且用户无法获取数据。

遗憾的是，这不是一项微不足道的工作。

setData（）函数将处理1和3： http ： //api.highcharts.com/highcharts#Series.setData%28%29

OTOH ，如果您想使用标准（非分组，非堆叠）条形图执行此操作，您可以简单地将每个条形图设置为单独的数据系列，并且内置的图例function将为您处理所有内容。