主页 / 问题

问题[highcharts]

Martin Hope
Pashok
Asked: 2022-06-30 15:28:47 +0800 CST
  • 0

默认情况下，悬停会隐藏所有组中的所有其他列。我怎样才能使只有该组中的列在悬停时隐藏？我在文档中找到了悬停事件，并获取了列（左上角），但是如何用它隐藏它？也许通过tooltip什么？

现在如何工作 它现在如何工作的一个例子： 的一个例子：它应该如何工作的一个例子： 示例如何 

chart1 = new Highcharts.Chart({
 chart: {
    renderTo: 'chart_1',
    type: 'column',
    height: 350,
 },

 title: {
    text: 'Планы разработчиков по созданию HTML5 игр с помощью разных инструментов(в %)'
 },
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
 },
 yAxis: {
    title: {
       text: 'Опрошено'
    }
 },
 /*tooltip: {
   shared: true,
   split: true,
 },*/
 plotOptions: {
   series: {
            point: {
              events: {
                mouseOver: function() {
                  var chart = this.series.chart;
                  if (!chart.lbl) {
                        chart.lbl = chart.renderer.label('')
                            .attr({
                                padding: 10,
                                r: 10,
                                fill: Highcharts.getOptions().colors[1]
                            })
                            .css({
                                color: '#FFFFFF'
                            })
                            .add();
                    }
                    chart.lbl
                        .show()
                        .attr({
                            text: 'x: ' + this.x + ', y: ' + this.y
                        });
                }
              }
            },
            events: {
                mouseOut: function (){
                    if (this.chart.lbl) {
                        this.chart.lbl.hide();
                    }
                }
            }
        },
        column: {
          groupPadding: 0.1,
          pointPadding: 0.1,
          borderWidth: 0,
          events: {
            mouseOver: function() {
              console.log("1");
            }
          }
        }
 },
 series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
 }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
 }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
 }]
});
.actions, .chart {
    margin: 15px auto;
    width: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart_1" class="chart"></div>

javascript highcharts
Martin Hope
Al Mr
Asked: 2020-01-16 15:50:37 +0800 CST
  • 3

Highcharts js库中有没有办法为同一个图表设置不同的颜色？那么带负值的线是一种颜色，而带正值的同一条线是另一种颜色？

UPD

这就是我构建图表的方式

new Highcharts.Chart({
    "chart":{
        "renderTo":"chart1",
        "height":200,
        "width":300
    },
    "xAxis":{
        "type":"datetime",
        "title":false,
        "dateTimeLabelFormats":{"day":"%e.%m"}
    },
    "series":[{
        "data":[{
            "x":1515184552000,"y":3.62,"color":"#ff0000", 
            ...
        }],
    }],
    "tooltip":{"enabled":false},
    "legend":{"enabled":false}
});

这导致了一个图表

日程

零以下的线必须是不同的颜色。从代码中可以看出，我尝试data转移到数组color，但是当鼠标悬停在图表上时，只有点的颜色会发生变化，而不是图表线本身。

highcharts