标签: highcharts

在Highcharts热图中,我通常定义一个click事件:

options.plotOptions = {
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                /* action */
                }
            }
        }
    }
};

如何在此函数中获取xAxis和yAxis信息？

例如,在这个演示中,当我点击左上角的0.67时,我想提醒"星期五,亚历山大".

我可以将参数传递给这个函数吗？或者还有其他方法吗？

谢谢!:)

我想合并两个数组并在图表上显示它们但不能这样做.请显示绘制该类型图表的正确语法.如果someobdy可以提供一个jsfiddle链接,那么对我的理解会更好.谢谢.

$(function () {
    var name = ['chrome','firefox','opera'];
    var data = [11.22,81.54,6];
    var final = [name,data];

    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares January, 2015 to May, 2015'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: "Results",
            colorByPoint: true, …

我使用Highcharts绘制图形.

我想添加"导出到PNG"选项,其中包括Highcharts图和外部div.使用Highcharts导出时,我无法添加包含图表的外部div.

我在这里看到了几个使用html2canvas的例子.当我尝试使用它时,Highcharts的SVG元素不包含在输出图像中.

有没有人知道一个解决方案,比试图在外部HTML div图像中合并SVG图像更好？

更新 -

使用最新版本的html2canvas修复了该问题,但输出略有不同:

原版的:

html2canvas输出:

如您所见,某些元素在不同位置呈现两次.

谁知道怎么解决？

我想在Android和iOS移动应用中使用HighCharts.在Android或iOS中是否可以使用任何库或Gradle依赖项？

我试图绘制一个每月更新一次的图表.默认情况下,我应该显示18个月的数据,并在18个月后显示滚动条.在悬停点时,应该有一个工具提示,其中包含与该点相关的数据,而不是x和y值.在这里,我尝试使用tooltip但加载图失败.这是jsfiddle.我试过从网上做一些东西,但没有运气.任何解决方案都会有很大帮助.

参考:-

highchart

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

脚本:

 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',zoomType: 'xy',
        },
        title: {
            text: ' '
        },
        subtitle: {
            text: ' '
        },
         scrollbar: {
        enabled: true,

    },
        xAxis: {
        ordinal: false,
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: …

今天我用highcharter包开始冒险.我对钻井图感兴趣.

(快速检查我想要创建的没有r)

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/

R代码与2个级别的钻取图的工作示例.

library("dplyr")
library("purrr")
library("highcharter")

df <- data_frame(
  name = c("Animals", "Fruits", "Cars"),
  y = c(5, 2, 4),
  drilldown = tolower(name)
)
df


ds <- list.parse3(df)
names(ds) <- NULL
str(ds)
hc <- highchart() %>%
  hc_chart(type = "column") %>%
  hc_title(text = "Basic drilldown") %>%
  hc_xAxis(type = "category") %>%
  hc_legend(enabled = FALSE) %>%
  hc_plotOptions(
    series = list(
      boderWidth = 0,
      dataLabels = list(enabled = TRUE)
    )
  ) %>%
  hc_add_series(
    name = "Things",
    colorByPoint = TRUE,
    data = ds
  )


dfan …

我正在将highcharts与highmaps一起使用。我必须显示状态级别的向下钻取。因此，我正在使用http://www.highcharts.com/maps/demo/latlon-advanced。我的代码如下：

    var baseMapPath = "https://code.highcharts.com/mapdata/";
    localStorage.setItem('locationHash', 'countries/us/us-all'),
    mapGeoJSON = null;
    function change() {
        console.log("localStorage : ", localStorage.getItem('locationHash'));
        var locationVariable = localStorage.getItem('locationHash') + '.js';
        var mapKey = locationVariable.slice(0, -3),
        javascriptPath = baseMapPath + locationVariable,
        up = angular.element(document.getElementById('up')),
        container = angular.element(document.getElementById('container')),
        containerHighcharts = container.highcharts();


        if (containerHighcharts) {
            containerHighcharts.showLoading('<i class="fa fa-spinner fa-spin fa-2x"></i>');
        }
        function mapReady(jsonData) {
            console.log("mapKey inside mapReady function : ", mapKey);
            console.log("Highcharts : ", Highcharts);
            console.log("typeof : ", typeof(Highcharts));
            mapGeoJSON = Highcharts.maps[mapKey];
            var data = jsonData,
                match;

            // …

我正在寻找所需的输出,如下所示:

series.dataLabels.align:left/right`没有剪切它.它只会出现在每个栏的蓝色矩形之后而不是最右边,这不是我想要的.我也看了一下highcharts api,我无法找到完成工作的图表选项.提前致谢.

 My current chart options:
 var options = {
            chart: {
                renderTo: 'container',
                type: 'bar',
            },
            credits: {
                enabled: false
            },
            colors: ['#024a7a'],
            title:{
                text:null
            },
            plotOptions: {
                bar:    {
                animation: false
                },
                series: {
                    showInLegend: false,
                    states: {
                        hover:  {
                            enabled:false
                        }
                    }
                }
            },
            tooltip: { 
            enabled: false 
            },
            xAxis: [{
                categories: ['SAC 1', 'SAC 2', 'SAC 3'],
                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0
            }],
            yAxis: [{
                gridLineWidth: 0,
                labels: {
                    enabled: …

我在闪亮的仪表板上使用highcharter创建了图表，并且尝试自定义工具提示。图表为折线图和散点图。我希望它执行以下操作：

1）有一个用于显示悬停信息的框（当前有一个框用于行，一个框用于散点）

2）能够使用x或y系列值中未使用的另一列信息

我希望工具提示针对每个特定的x轴值显示以下信息（是否将鼠标悬停在散点图或直线上）。

总体

平均值：2 [平均值：data $ avghours]

狗：1 [数据动物：数据小时]

以下是我编写的演示我的问题的示例代码：

library (shiny)
library (shinydashboard)
library (highcharter)


header <- dashboardHeader(title = "Example")

body <- dashboardBody(

  fluidRow(
    box(title = "example", status = "primary", solidHeader = TRUE, 
        highchartOutput("chart")
    )
   )
)

sidebar <- dashboardSidebar()

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {

  date <- c(1,2,3,4,5,6,7,8,9,10)
  hours <- c(1,5,4,1,6,5,7,5,4,3)
  avghours <- c(2,2,2,3,3,3,2,2,2,2)
  animal <- c("dog","cat","cat","cat","cat","cat","cat","cat","dog","dog")
  data <- data.frame(date,hours,avghours,animal)

  output$chart <- renderHighchart({

    highchart() %>%
      hc_add_series(name = "Shipments", data=data$hours, type = "scatter", …

我想填写高图的子弹,就像高阶图栏一样.如果有人知道highcharts,请帮助我.这是我正在使用的高级功能.我想将第一种颜色作为第一种颜色作为第二种颜色作为第二种颜色.如果您知道任何解决方案,请告诉我.谢谢

var chart = new Highcharts.Chart({
            chart: {
                renderTo:'DimensionsChartfirst',
                type:'column'
            },
            colors: ['#0070C0', '#C00000'],
           title: {
                text: 'Office data'
            },
            subtitle: {
                text: ''
            },
            credits:{enabled:false},
            legend:{
            },
            plotOptions: {
                series: {
                    shadow:false,
                    borderWidth:0
                }
            },
            xAxis:{
            categories: [
                    'Weight',
                    'Height'
                ],
                lineColor:'#999',
                lineWidth:1,
                tickColor:'#666',
                tickLength:3,
                title:{
                    text:'Part Counts'
                }
            },
            yAxis:{
                lineColor:'#999',
                lineWidth:1,
                tickColor:'#666',
                tickWidth:1,
                tickLength:3,
                gridLineColor:'#ddd',
                title:{
                    text:'Office data',
                   // rotation:90,
                    margin:10
                }
            },    
            series: [{
                        name: 'MAX',
                data: MaxVal,
                colors: ['#0070C0'],
                type: 'column',
                colorByPoint: true
            },{
                        name: …