始终在Highcharts的所有列上显示工具提示

悉达思

这是一个柱形图-https: //jsfiddle.net/kx8qqh2e/

当您将鼠标悬停在列上时,它会显示一个不错的工具提示。我想始终在所有列上显示工具提示,而无需用户将鼠标悬停在它们上方。我该如何实现?

var chart_data;
    chart_data = {
      chart: {
        type: 'column',
        backgroundColor: '#FBFBFB',
        plotBackgroundColor: '#FBFBFB'
      },
      title: {
        text: '<b>Category-Wise APF</b>',
        verticalAlign: 'bottom',
        useHTML: true,
        style: {
          color: '#454545',
          fontSize: '14px'
        },
        y: 13
      },
      xAxis: {
        type: 'category'
      },
      yAxis: {
        labels: {
          enabled: false
        },
        title: '',
        gridLineColor: '#EFEFEF'
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: '<b>{point.y}</b>'
      },
      series: [
        {
          colorByPoint: true,
          data: [
            {
              name: 'Sports & Fitness',
              y: 1.34,
              color: '#2E91A4'
            }, {
              name: 'Fashion Apparels',
              y: 1.29,
              color: '#3196A5'
            }, {
              name: 'Women\'s Clothing',
              y: 1.24,
              color: '#2F9BA6'
            }, {
              name: 'Footwear',
              y: 1.23,
              color: '#319FA7'
            }, {
              name: 'Clothing & Apparels',
              y: 1.21,
              color: '#34A3A8'
            }, {
              name: 'Audio Equipments',
              y: 1.20,
              color: '#36A3A8'
            }, {
              name: 'Home Decor',
              y: 1.13,
              color: '#38ADAA'
            }, {
              name: 'Health & Personal Care',
              y: 1.12,
              color: '#38B1AB'
            }, {
              name: 'Mobile Accessories',
              y: 1.12,
              color: '#39B7AB'
            }, {
              name: 'Computer Accessories',
              y: 1.11,
              color: '#3DBBAD'
            }
          ]
        }
      ]
    };
    $('#categorywise-apf-graph').highcharts(chart_data);
耶赫特

希望这个小提琴能回答您的问题。

您想要的效果是通过在highcharts中使用plotOptionsAPI link here指令实现的。

$(document).ready(function() {
  var chart_data;
  chart_data = {
    chart: {
      type: 'column',
      backgroundColor: '#FBFBFB',
      plotBackgroundColor: '#FBFBFB'
    },
    title: {
      text: '<b>Category-Wise APF</b>',
      verticalAlign: 'bottom',
      useHTML: true,
      style: {
        color: '#454545',
        fontSize: '14px'
      },
      y: 13
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      labels: {
        enabled: false
      },
      title: '',
      gridLineColor: '#EFEFEF'
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      series: {
        dataLabels: {
          align: 'left',
          enabled: true
        }
      }
    },
    series: [{
      colorByPoint: true,
      data: [{
        name: 'Sports & Fitness',
        y: 1.34,
        color: '#2E91A4'
      }, {
        name: 'Fashion Apparels',
        y: 1.29,
        color: '#3196A5'
      }, {
        name: 'Women\'s Clothing',
        y: 1.24,
        color: '#2F9BA6'
      }, {
        name: 'Footwear',
        y: 1.23,
        color: '#319FA7'
      }, {
        name: 'Clothing & Apparels',
        y: 1.21,
        color: '#34A3A8'
      }, {
        name: 'Audio Equipments',
        y: 1.20,
        color: '#36A3A8'
      }, {
        name: 'Home Decor',
        y: 1.13,
        color: '#38ADAA'
      }, {
        name: 'Health & Personal Care',
        y: 1.12,
        color: '#38B1AB'
      }, {
        name: 'Mobile Accessories',
        y: 1.12,
        color: '#39B7AB'
      }, {
        name: 'Computer Accessories',
        y: 1.11,
        color: '#3DBBAD'
      }]
    }]
  };
  $('#categorywise-apf-graph').highcharts(chart_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>



<div style="width: 500px; height: 500px;" id="categorywise-apf-graph"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

所有系列的 Highcharts 工具提示

vuejs创建工具提示,显示所有工具提示

Materializecss-始终显示带有操作按钮的工具提示

带有工具提示消息的进度栏应始终显示

如何在所有内容上显示工具提示

ChartJS:在工具提示中显示混合图表的所有标签

强制所有浏览器工具提示同时显示

Highcharts工具提示以毫秒为单位显示工具提示日期

让Intellij IDEA始终显示参数工具提示

Highcharts同步图表显示工具提示

Highcharts 在工具提示上显示负值

始终在HighCharts中的列上方显示数据标签

Highcharts/HighcharteR 工具提示:访问系列中的所有 y 值,打印差异

带有负堆栈的 Highcharts 栏:如何为左右显示不同的工具提示

连续显示所有<td>上的工具提示,但最后一个显示

当鼠标悬停在带有WPF的.NET中的列上时,如何显示描述的工具提示?

始终显示 ASP.NET TextBox 工具提示

如何始终以离子角度显示折线图工具提示。?

chartjs-不显示所有x轴数据点,而是在工具提示中显示所有

HighCharts工具提示问题

添加语言以始终显示在 LibreOffice Writer 的“工具 > 语言 > 所有文本”中

Highcharts插件:单击时显示/隐藏工具提示

格式化highcharts日期工具提示以显示时区

在Highcharts饼图的json中显示工具提示中的数据

Highcharts Gantt - 在依赖路径悬停时显示工具提示

在Highcharts的工具提示中显示数组中的数组

散景悬停工具提示不显示所有数据-IPython Notebook

在垂直线的所有点上显示工具提示

如何关闭在Plotly中显示所有数据的工具提示?