Highcharts：我可以通过编程方式在热图上添加一条线吗？

dgjrabp2 于 8个月前发布在 Highcharts

关注(0)|答案(2)|浏览(105)

我有一个非常大的热图，在图表中有一个100 x100的数据网格。

我不想在此图表上显示图例。

我希望能够以编程方式，使用JavaScript，每当用户单击显示图表的页面上的特定复选框时，在热图顶部添加另一行。
这是否可行？
编辑：下面是在Photoshop中创建的一个图像，它显示了我想在最后-这条线不应该出现在图表最初加载时，但应该使用JavaScript在页面的主体中添加一个复选框：

谢谢你，谢谢

highcharts

来源：https://stackoverflow.com/questions/77000781/highcharts-can-i-add-a-line-on-top-of-a-heatmap-programmatically

2条答案

按热度按时间

bbuxkriu1#

如果你想合并两个系列，只需添加另一个系列到系列数组中，并使用按钮使其动态显示，你可以先将其隐藏在设置series.visible: false中，然后使用series.setVisible()方法切换可见性：

const chart = Highcharts.chart('container', {
  ...
  series: [{
    type: 'heatmap',
    ...
  }, {
    type: 'spline',
    color: '#0093ff',
    data: [0, 2.5, 2, 4, 5],
    lineWidth: 3,
    visible: false
  }]
});

document.getElementById('btn').addEventListener('click', function() {
    chart.series[1].setVisible();
})

Demo：https://jsfiddle.net/BlackLabel/j0zbv7y2/
API：https://api.highcharts.com/highcharts/plotOptions.series.visible

https://api.highcharts.com/class-reference/Highcharts.Series#setVisible

赞(0）回复(0）举报 8个月前

oyjwcjzk2#

您可以向point.events.click（）添加逻辑，以创建相对于该点定位的单独图形：

Highcharts.chart('container', {
  ...
  plotOptions: {
    series: {
      point: {
        events: {
          click: function() {
            const point = this,
              chart = point.series.chart;

            if (chart.innerChart) {
              chart.innerChart.div.remove();
              chart.innerChart.destroy();
            }

            const id = `point-${this.x}-${this.y}`,
              shape = point.shapeArgs,
              width = shape.width,
              height = shape.height,
              left = chart.plotLeft + point.plotX - width / 2,
              top = chart.plotTop + point.plotY - height / 2,
              chartDiv = document.createElement('div');

            chartDiv.setAttribute("id", id);
            chartDiv.style.cssText = `
                background-color: red;
                position: absolute;
                top: ${top}px;
                left: ${left}px;
                width: ${width}px;
                height: ${height}px;
                zIndex: 10;
            `;

            chart.container.style.position = 'relative';
            chart.container.appendChild(chartDiv);

            chart.innerChart = Highcharts.chart(chartDiv, {
              title: {
                text: point.value
              },
              exporting: {
                enabled: false
              },
              legend: {
                enabled: false
              },
              credits: {
                enabled: false
              },
              series: [{
                data: [1, 3, 7]
              }]
            });
            
            chartDiv.addEventListener('click', function() {
                chartDiv.remove();
                chart.innerChart.destroy();
                delete chart.innerChart;
            })

            chart.innerChart.div = chartDiv;
          }
        }
      }
    }
  }
});

Demo：https://jsfiddle.net/BlackLabel/b0xwr59d/

赞(0）回复(0）举报 8个月前