标签: highcharts

我使用的是 Highcharts 柱形图 ( http://www.highcharts.com/demo/column-basic )，其中包含超过 50 行数据和 3 个不同的系列。由于此数量和图表宽度限制，x 轴标签靠近并聚集在一起。

当用户将鼠标悬停在图表内的点/列上时，我想加粗或更改 x 轴标签的颜色。我知道您可以绑定到每个点的事件（http://api.highcharts.com/highcharts#plotOptions.column.point.events），但我无法将任何样式更改链接到 x 轴标签由此。这是一个 jsFiddle ( http://bit.ly/SpPvCW )，其中包含该点上的事件。代码块如下所示：

plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function() {
                        $reporting.html('x: '+ this.x +', y: '+ this.y);
                    }
                }
            },
            events: {
                mouseOut: function() {                        
                    $reporting.empty();
                }
            }
        }
}

此 jsFiddle ( http://jsfiddle.net/4h7DW/1/ ) 包含一个柱形图，其中 x 轴标签旋转。

xAxis: {
            labels: {
                rotation: -70,
                align: 'right',
                style: {
                    fontSize: '10px',
                    color:'#999',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
}, …

似乎 Highcharts 在 1. 系列线开始/系列线结束和 2. 垂直轴之间添加了一些间距。

有关更多详细信息，请参阅 jsfiddle 链接和下面的屏幕截图。

http://jsfiddle.net/8kbf2e1x/

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

        xAxis: {
            categories: ['D1', 'D2', 'D3', 'D4']
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        verticalAlign: 'bottom'
    },

    plotOptions: {
        series: {
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851]
    }, { …

我正在使用烧瓶，因此我有一个字典，其中包含我想用 highcharts 显示的所有数据。

my_dic = {
        'dataset1': 
            {'x_data': [1, 2, 3, 4, 5, 6], 
            'y_data': [7, 8, 9, 10, 11, 12]}, 
        'dataset2': 
            {'x_data': [1, 2, 3, 4, 5, 6], 
            'y_data': [1, 2, 3, 4, 5, 6]}
        }

正如你在这里看到的，my_dic 的每个键都应该是系列的名称，然后我有另一个 dict，其中包含每个数据集的 x 和 y 数据。

如果我想用 python 和 matplotlib 绘制一些东西，这个解决方案非常方便，因为我只需要使用常规循环来获取所有内容。

for dataset in my_dic:
    data = my_dic[dataset]
    line = ax.plot(data["x_data"], data["y_data"], label=dataset)

如果我想用高图绘制所有内容，有没有办法做同样的事情？如何使用 javascript 创建这样的循环？

我的 highcharts 图函数如下所示：

$(function () { 
    var myChart = Highcharts.chart('spectra', {
        chart: {
            type: 'line'
        }, …

当我启用时tooltip.shared = true，箭头会像屏幕截图一样消失。

tooltip: {
  shared: true
},

我想保持箭头就像 tooltip.shared = false

tooltip: {
  shared: false
},

演示在这里http://jsfiddle.net/puff0211/5sbfztur/

有谁知道要做到这一点？

谢谢！

我正在尝试在 Highchart 注释上添加一个点击事件，但它不起作用..

我尝试在注释对象上设置事件属性，如下所述：

https://www.highcharts.com/products/plugin-registry/single/17/Annotations

事件 mouseup、click、dblclick。回调中的 this 指的是注解对象。

我在这里找不到关于注释事件的任何信息：https : //api.highcharts.com/highcharts/annotations

我做错了什么？

// Data generated from http://www.bikeforums.net/professional-cycling-fans/1113087-2017-tour-de-france-gpx-tcx-files.html
var elevationData = [
    [0.0, 225],
    [0.1, 226],
    [0.2, 228],
    [0.3, 228],
    [0.4, 229],
    [0.5, 229],
    [0.6, 230],
    [0.7, 234],
    [0.8, 235],
    [0.9, 236],
    [1.0, 235],
];

// Now create the chart
Highcharts.chart('container', {

    chart: {
        type: 'area',
        zoomType: 'x',
        panning: true,
        panKey: 'shift',
        scrollablePlotArea: {
            minWidth: 600
        }
    },

    title: {
        text: '2017 Tour de France Stage 8: Dole - …

我想在使用打字稿的反应中重现这个highmaps 示例。然而，纬度/经度点没有显示出来，这似乎与 proj4 包有关，因为它在这个 javascript演示中工作。

我已经在现场演示中尝试过。如果我按如下方式加载包，它没有被使用，但我不知道应该在哪里调用它：

import * as proj4 from "proj4";

提前致谢！

我试图创建一个使用多层钻取图形highcharter与动态数据shiny。在 SO 社区的帮助下（对 @K. Rohde 大喊大叫）能够通过循环遍历所有可能的钻取来解决这个问题。我的实际应用程序将有数百个可能的向下钻取，我不想将这些额外的时间添加到应用程序中，而是使用addSingleSeriesAsDrilldown. 虽然不确定如何在 R 中使用它。

以下是我的问题循环遍历所有钻取可能性的工作示例：

library (shinyjs)
library (tidyr)
library (data.table)
library (highcharter)
library (dplyr)
library (shinydashboard)
library (shiny)

x <- c("Farm","Farm","Farm","City","City","City","Ocean","Ocean")
y <- c("Sheep","Sheep","Cow","Car","Bus","Bus","Boat","Boat")
z <- c("Bill","Tracy","Sandy","Bob","Carl","Newt","Fig","Tony")
a <- c(1,1,1,1,1,1,1,1)

dat <- data.frame(x,y,z,a)

header <- dashboardHeader()
body <- dashboardBody(

  highchartOutput("Working"),
  verbatimTextOutput("trial")

)
sidebar <- dashboardSidebar()

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {

  output$Working <- renderHighchart({
    #First Tier #Copied
    datSum <- dat %>%
      group_by(x) %>% …

我正在尝试在使用 highcharts ( https://api.highcharts.com/highcharts/ ) 的react js 中构建饼图，它只接受以下格式的饼图数据（或者我可能错了）： Sample Fiddle here : https://jsfiddle.net/react_user1/e9cbsrdL/1/

data: [
      {name: 'abc', y: 10},
      {name: 'def', y: 90}
]

我从 API 获得的数据如下所示：

const counts:[
{
"id": "all",
"type": "all",
"count": 1403
},
{
"id": "bad",
"type": "bad",
"count": 0
},
{
"id": "failed",
"category": false,
"type": "failed",
"count": 58
},
{
"id": "changed",
"category": true,
"type": "changed",
"count": 123
}

所以我试图在这里实现三件事：

1. Remove the first {}, with the "id": "all"
2. Rename the key: "id" …

我正在尝试在 highcharts 上重绘数据。我使用此代码来初始化图表。

    Highcharts.chart('container', {
chart: {
            events: {
                click: function(event) {
                    alert (
                    'x: '+ Highcharts.dateFormat('%Y-%m-%d', event.xAxis[0].value) +', ' +
                    'y: '+ event.yAxis[0].value
                    );
                }
            }
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Amount'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },

        plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert ('Category: '+ this.category +', value: …

我有多个与 Webdatarocks 集成的 Highcharts。我需要在单个图表上有一条水平线，为此我使用了下面的代码。这按预期工作，但我面临的问题是

• 即使我仅在单个图表中添加了代码，它也会在所有其他 Highcharts 中添加水平线。
• Highcharts 中的排序与其他图表混合在一起。

请建议如何使一个图表独立于其他图表，使其不使用彼此的属性。

data => {
      this.Highcharts.setOptions({
        yAxis: {
          plotLines: [{
              color: 'blue',
              width: 2,
              value: 25,
              zIndex: 5,
              label:{
                text:"label1",
                align:'left'
              }
          }]
      },
        plotOptions: {
          
          series: {
            borderWidth: 0,
            dataSorting: {
              enabled: true,
            },
            dataLabels: {
              enabled: true,
              formatter: function () {
                let value = (this.y);
                return '' + value.toFixed(1);
              }

            },  // set colors of the series
          }
        }
      });
      createAndUpdateChart(data);
    },