在Highcharts向下搜索图例中更改系列标题
我创建了一个Highcharts折线图，比较过去十年各州的平均评级。y轴包含年份，可以选择多个状态进行比较。图表上的每一点都深入到一个条形图中，该条形图显示了创建该特定年份该特定州在主图表上的平均值的子类别。这就是我想要它做的 但后来我注意到，这完全是偶然的，如果我点击y轴上的某一年，它也会向下搜索，并显示当前出现在主图表上的特定年份的每个州的子类别的比较。我真的很喜欢这个功能。然而，有一个问题我无法解决，那就是这个特定的向下搜索上的图例没有显示州的名称，而是显示所有州作为所选年份的名称。从主图表上的某个点向下钻取时，这是可取的，因为只有一个状态，显示年份对用户很有帮助，但在这里，这是令人困惑的。如果在这一年里，向下钻取图例，将显示选定州的名称，那就太好了 有谁能给我一些如何实现这一目标的指导吗？非常感谢 这里有一个指向JSFIDLE的链接： 下面是包含前两个状态的图表代码（正如您将在JDFIDLE中看到的，还有更多的状态，但为了简洁起见，我在这里将它们删去）： 这是我在上面相同的两种状态后在这里切断的向下搜索代码：在Highcharts向下搜索图例中更改系列标题,highcharts,Highcharts,我创建了一个Highcharts折线图，比较过去十年各州的平均评级。y轴包含年份，可以选择多个状态进行比较。图表上的每一点都深入到一个条形图中，该条形图显示了创建该特定年份该特定州在主图表上的平均值的子类别。这就是我想要它做的 但后来我注意到，这完全是偶然的，如果我点击y轴上的某一年，它也会向下搜索，并显示当前出现在主图表上的特定年份的每个州的子类别的比较。我真的很喜欢这个功能。然而，有一个问题我无法解决，那就是这个特定的向下搜索上的图例没有显示州的名称，而是显示所有州作为所选年份的名称。从主图
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
series: [{
id: 'ag2010', //Aguascalientes start
name: '2010',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.764],
['Índice Democracia de las Instituciones', 7.601],
['Índice Democracia Social', -0.161],
['Índice Democracia Económica', 0.478],
['Desarrollo Democrático ', 7.696]
]
}, {
id: 'ag2011',
name: '2011',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.653],
['Índice Democracia de las Instituciones', 7.087],
['Índice Democracia Social', -0.15],
['Índice Democracia Económica', 0.714],
['Desarrollo Democrático ', 8.665]
]
}, {
id: 'ag2012',
name: '2012',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.653],
['Índice Democracia de las Instituciones', 7.087],
['Índice Democracia Social', -0.15],
['Índice Democracia Económica', 0.714],
['Desarrollo Democrático ', 8.665]
]
}, {
id: 'ag2013',
name: '2013',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 3.394],
['Índice Democracia de las Instituciones', 5.054],
['Índice Democracia Social', 0.087],
['Índice Democracia Económica', 0.031],
['Desarrollo Democrático ', 4.816]
]
}, {
id: 'ag2014',
name: '2014',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.807],
['Índice Democracia de las Instituciones', 4.860],
['Índice Democracia Social', 0.536],
['Índice Democracia Económica', 0.855],
['Desarrollo Democrático ', 7.670]
]
}, {
id: 'ag2015',
name: '2015',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.408],
['Índice Democracia de las Instituciones', 5.181],
['Índice Democracia Social', 0.621],
['Índice Democracia Económica', 1.169],
['Desarrollo Democrático ', 8.026]
]
}, {
id: 'ag2017',
name: '2017',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.166],
['Índice Democracia de las Instituciones', 5.980],
['Índice Democracia Social', 0.755],
['Índice Democracia Económica', 1.350],
['Desarrollo Democrático ', 9.201]
]
}, {
id: 'ag2018',
name: '2018',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.553],
['Índice Democracia de las Instituciones', 5.319],
['Índice Democracia Social', 0.499],
['Índice Democracia Económica', 1.495],
['Desarrollo Democrático ', 10.000]
]
}, {
id: 'bc2010', //BCN start
name: '2010',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 4.346],
['Índice Democracia de las Instituciones', 4.870],
['Índice Democracia Social', -0.822],
['Índice Democracia Económica', 1.544],
['Desarrollo Democrático', 6.515]
]
}, {
id: 'bc2011',
name: '2011',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 4.274],
['Índice Democracia de las Instituciones', 3.65],
['Índice Democracia Social', 0.861],
['Índice Democracia Económica', 0.262],
['Desarrollo Democrático ', 4.941]
]
}, {
id: 'bc2012',
name: '2012',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 3.401],
['Índice Democracia de las Instituciones', 4.238],
['Índice Democracia Social', 0.529],
['Índice Democracia Económica', 0.056],
['Desarrollo Democrático ', 4.369]
]
}, {
id: 'bc2013',
name: '2013',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 4.297],
['Índice Democracia de las Instituciones', 3.964],
['Índice Democracia Social', 0.907],
['Índice Democracia Económica', 0.671],
['Desarrollo Democrático ', 4.936]
]
}, {
id: 'bc2014',
name: '2014',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.565],
['Índice Democracia de las Instituciones', 3.581],
['Índice Democracia Social', 0.696],
['Índice Democracia Económica', -0.008],
['Desarrollo Democrático', 5.512]
]
}, {
id: 'bc2015',
name: '2015',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.913],
['Índice Democracia de las Instituciones', 2.833],
['Índice Democracia Social', 0.306],
['Índice Democracia Económica', -0.05],
['Desarrollo Democrático ', 5.066]
]
}, {
id: 'bc2017',
name: '2017',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 2.511],
['Índice Democracia de las Instituciones', 3.621],
['Índice Democracia Social', 0.577],
['Índice Democracia Económica', -0.315],
['Desarrollo Democrático ', 1.855]
]
}, {
id: 'bc2018',
name: '2018',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.317],
['Índice Democracia de las Instituciones', 3.764],
['Índice Democracia Social', 0.468],
['Índice Democracia Económica', -0.197],
['Desarrollo Democrático ', 5.594]
]
},
您可以使用图表的向下和向上钻取事件来更改标题 小提琴示例： API参考：
这种方法在单个图表上非常有效，不过，我刚刚意识到，当同一页上有多个图表，每个图表都使用这段代码时，它将只在其中一个图表（页面上的最后一个）上工作，而以前的图表将恢复其常规行为。你对如何在同一页上的多个图表上实现这一点有什么建议吗？事实上，我在上面的评论中找到了我问题的答案。对于可能对此感到好奇的任何人，只需更改每个图表的图表名称。而我将图表改为图表2，以此类推，每增加一张图表
chart2=Highcharts.chart（'container-2'，{chart:{type:'line'，backgroundColor:'f3f7fa'，事件：{drilldown:function（e）{chart2.setTitle（{text:e.point.name}）；}，drillup:function（e）{chart2.setTitle（{text:title}）}，drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
series: [{
id: 'ag2010', //Aguascalientes start
name: '2010',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.764],
['Índice Democracia de las Instituciones', 7.601],
['Índice Democracia Social', -0.161],
['Índice Democracia Económica', 0.478],
['Desarrollo Democrático ', 7.696]
]
}, {
id: 'ag2011',
name: '2011',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.653],
['Índice Democracia de las Instituciones', 7.087],
['Índice Democracia Social', -0.15],
['Índice Democracia Económica', 0.714],
['Desarrollo Democrático ', 8.665]
]
}, {
id: 'ag2012',
name: '2012',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.653],
['Índice Democracia de las Instituciones', 7.087],
['Índice Democracia Social', -0.15],
['Índice Democracia Económica', 0.714],
['Desarrollo Democrático ', 8.665]
]
}, {
id: 'ag2013',
name: '2013',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 3.394],
['Índice Democracia de las Instituciones', 5.054],
['Índice Democracia Social', 0.087],
['Índice Democracia Económica', 0.031],
['Desarrollo Democrático ', 4.816]
]
}, {
id: 'ag2014',
name: '2014',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.807],
['Índice Democracia de las Instituciones', 4.860],
['Índice Democracia Social', 0.536],
['Índice Democracia Económica', 0.855],
['Desarrollo Democrático ', 7.670]
]
}, {
id: 'ag2015',
name: '2015',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.408],
['Índice Democracia de las Instituciones', 5.181],
['Índice Democracia Social', 0.621],
['Índice Democracia Económica', 1.169],
['Desarrollo Democrático ', 8.026]
]
}, {
id: 'ag2017',
name: '2017',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.166],
['Índice Democracia de las Instituciones', 5.980],
['Índice Democracia Social', 0.755],
['Índice Democracia Económica', 1.350],
['Desarrollo Democrático ', 9.201]
]
}, {
id: 'ag2018',
name: '2018',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.553],
['Índice Democracia de las Instituciones', 5.319],
['Índice Democracia Social', 0.499],
['Índice Democracia Económica', 1.495],
['Desarrollo Democrático ', 10.000]
]
}, {
id: 'bc2010', //BCN start
name: '2010',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 4.346],
['Índice Democracia de las Instituciones', 4.870],
['Índice Democracia Social', -0.822],
['Índice Democracia Económica', 1.544],
['Desarrollo Democrático', 6.515]
]
}, {
id: 'bc2011',
name: '2011',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 4.274],
['Índice Democracia de las Instituciones', 3.65],
['Índice Democracia Social', 0.861],
['Índice Democracia Económica', 0.262],
['Desarrollo Democrático ', 4.941]
]
}, {
id: 'bc2012',
name: '2012',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 3.401],
['Índice Democracia de las Instituciones', 4.238],
['Índice Democracia Social', 0.529],
['Índice Democracia Económica', 0.056],
['Desarrollo Democrático ', 4.369]
]
}, {
id: 'bc2013',
name: '2013',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 4.297],
['Índice Democracia de las Instituciones', 3.964],
['Índice Democracia Social', 0.907],
['Índice Democracia Económica', 0.671],
['Desarrollo Democrático ', 4.936]
]
}, {
id: 'bc2014',
name: '2014',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.565],
['Índice Democracia de las Instituciones', 3.581],
['Índice Democracia Social', 0.696],
['Índice Democracia Económica', -0.008],
['Desarrollo Democrático', 5.512]
]
}, {
id: 'bc2015',
name: '2015',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.913],
['Índice Democracia de las Instituciones', 2.833],
['Índice Democracia Social', 0.306],
['Índice Democracia Económica', -0.05],
['Desarrollo Democrático ', 5.066]
]
}, {
id: 'bc2017',
name: '2017',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 2.511],
['Índice Democracia de las Instituciones', 3.621],
['Índice Democracia Social', 0.577],
['Índice Democracia Económica', -0.315],
['Desarrollo Democrático ', 1.855]
]
}, {
id: 'bc2018',
name: '2018',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.317],
['Índice Democracia de las Instituciones', 3.764],
['Índice Democracia Social', 0.468],
['Índice Democracia Económica', -0.197],
['Desarrollo Democrático ', 5.594]
]
},
chart: {
type: 'line',
events: {
drilldown: function(e) {
chart.setTitle({ text: e.point.name });
},
drillup: function(e) {
chart.setTitle({ text: 'IDD-Mex Indice'});
}
}
}