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

dgjrabp2  于 2023-10-20  发布在  Highcharts
关注(0)|答案(2)|浏览(156)

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

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

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

谢谢你,谢谢

bbuxkriu

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();
})

Demohttps://jsfiddle.net/BlackLabel/j0zbv7y2/
APIhttps://api.highcharts.com/highcharts/plotOptions.series.visible

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

oyjwcjzk

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;
          }
        }
      }
    }
  }
});

Demohttps://jsfiddle.net/BlackLabel/b0xwr59d/

相关问题