标签: highcharts

我正在尝试各种排列在样条图上制作数据标签,但我只是不知道我做错了什么.

任何帮助,将不胜感激.

JsFiddle在这里

             plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
    name: 'Value',
            data: [

    [Date.UTC(2005,9,01), 2.02],[Date.UTC(2006,8,30), 7.56],[Date.UTC(2007,8,29), 5.22],[Date.UTC(2008,8,27), 6.57],[Date.UTC(2009,9,03), -4.48],[Date.UTC(2010,9,02), 5.29],[Date.UTC(2011,9,01), 7.44],[Date.UTC(2012,8,29), 3.39],[Date.UTC(2013,8,28), 6.54],
            ]
        }]  

我正在使用Highcharts并希望创建一个气泡图表,其中的条目在同样贬值的气泡大小中都是直线.诀窍在于使气泡之间几乎没有任何空间.像这样

有没有一种简单的方法可以做到这一点,除了编写某种算法将它沿着x轴放置在某一点？

非常感谢.

鉴于以下Highcharts.Chart(选项)

{
                "chart": {
                    "type": "spline"
                },
                "title": {
                    "text": "",
                    "x": -20
                },
                "subtitle": {
                    "text": "",
                    "x": -20
                },
                "xAxis": [
                    "23 Jun",
                    "24 Jun",
                    "25 Jun",
                    "26 Jun",
                    "27 Jun",
                    "28 Jun",
                    "29 Jun"
                ],
                "yAxis": {
                    "title": {
                        "text": ""
                    },
                    "plotLines": [
                        {
                            "value": 0,
                            "width": 1,
                            "color": "#808080"
                        }
                    ]
                },
                "legend": {
                    "layout": "vertical",
                    "align": "right",
                    "verticalAlign": "middle",
                    "borderWidth": 0
                },
                "series": [
                    {
                        "name": "exposed",
                        "data": [
                            100,
                            200,
                            150,
                            130, …

我需要制作一个图表,其中xAxis的类型为"datetime",但间隔不规则:

http://jsfiddle.net/cz6rL/

这是代码:

$(function () {
  $('#chart1').highcharts({
      chart: {
      zoomType: 'x',
      spacingRight: 20
      },
      title: {
      text: 'Incomes/Outcomes'
      },
      subtitle: {
      text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' :
          'Pinch the chart to zoom in'
      },
      xAxis: {
      type: 'datetime',
      minRange: 15 * 24 * 3600000,

      title: {
          text: null
      }
      },
      yAxis: {
      title: {
          text: 'Euro(€)'
      }
      },
      tooltip: {
      shared: true
      },
      legend: {
      enabled: true
      },
      plotOptions: { …

我正在尝试使用Highmaps作为Highcharts源文件(highcharts.js和map.js文件)的集成插件,如"入门"文档页面 - >"加载所需文件"部分所述.

对于系列类型,Map Bubble在页面上不显示任何内容.
见jsFiddle: http :
//jsfiddle.net/mihaelaCiocoiu/pvPur/3/

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://www.highcharts.com/samples/data/maps/us.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

$(function () {

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) {

    $('#container').highcharts('Map', {
        chart : {
            borderWidth : 1
        },

        title: {
            text: 'World population 2010 by country'
        },

        subtitle : {
            text : 'Demo of Highcharts map with bubbles'
        },

        legend: {
            enabled: false
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        series : [{
            name: 'Countries',
            mapData: Highcharts.maps.world, …

我的Highchart中的工具提示表现得很奇怪.它过着自己的生活.它没有显示我悬停点的工具提示,但随机显示任意点的工具提示.

这是一个JSFiddle示例:http://jsfiddle.net/AeV7h/9/

$(function () {

var data=[[28,0],[24,3],[16,10]];
var param= { WodTag: "cur_spd", Name: "Current speed", Color: "#C6C6C6", LineStyle: "Solid", SeriesType: "line", LineWidth: 2, TickInterval: null,  MinValue: null, MaxValue: null, Decimals: 2 };

$('#container').highcharts({
        chart: {
            height: 700,
            width: 400,
            plotBorderWidth: 1,
            plotBorderColor: '#E4E4E4',
        },
        xAxis: {
            title: {
                useHTML: true,
                text: param.Name + "( m/s  )",
            },
            gridLineWidth: 1,
            min: param.MinValue,
            max: param.MaxValue,
            gridLineDashStyle: 'Dot',
            tickInterval: param.TickInterval
        },
        yAxis: {
            title: {
                text: 'Depth(m)',
            },
            reversed: true, …

我们的页面包含由HighCharts生成的大量水平条形图.简而言之,图表中的工具提示正在被下面的图表和它们的侧面所掩盖.我已经搞砸了z-index,它似乎并没有什么不同.我看过以前类似的问题,但他们没有帮助.

这是我的例子:http://jsfiddle.net/o15gywrv/5/

如果将鼠标悬停在第一个图表上,您将看到工具提示被第二个图表覆盖.

我试过在容器和工具提示上玩z-index,但我没有看到任何区别:

.highcharts-container {
    overflow: visible !important;
    z-index: 0 !important;
}
.highcharts-tooltip {
    z-index: 9998;
}

我对Highcharts有问题-我正在尝试采用现有图表，将其合并为新图表，更改一些属性，然后显示它。

我遇到的问题是我似乎无法在复制的图表中启用xAxis标签。如果我在原始图表中将其打开，则它们将存在于复制的图表中，但是似乎无法更改启用状态。JSFiddle如下：

http://jsfiddle.net/liamfl/a7xvfyg6/

代码如下：

var chart_PortfolioDetailsDistribution;
var popupChart;

$(document).ready(function () {
    chart_PortfolioDetailsDistribution = new Highcharts.Chart({
        chart:{animation:false,renderTo:'smallchart3'}
        ,title:{text:'Distribution'}
        ,tooltip:{headerFormat:'',pointFormat:'<b>{point.name}</b>: {point.y}'}
        ,legend:{enabled:false}
        ,credits:{enabled:false}
        ,plotOptions:{series:{animation:false,borderWidth:0,dataLabels:{format:'<b>{point.y}</b>'}
        ,groupPadding:0,pointPadding:0}
    }
    ,yAxis:{
        title:{text:null}
    }
    ,xAxis:{
        labels:{enabled:false,rotation:-90}
        ,title:{text:null}
        ,type:'category'
    }
    ,series:[{
        data:[['<-10%',0],['<-5%',3],['<-2.5%',3],['<-1%',2],['<0%',10],['>0%',3],['>1%',0],['>2.5%',0],['>5%',0],['>10%',0]],
        name:'Portfolio',
        type:'column'}]
    });

    popupChart = new Highcharts.Chart(Highcharts.merge(chart_PortfolioDetailsDistribution.options, {
            chart: { renderTo: 'smallchart4' },
            xAxis: { labels: { enabled: true }},
            legend: { enabled: true },
            plotOptions: { series: { dataLabels: { enabled: true } }}
        }));
});

有任何想法吗？我很沮丧（对我来说这是自然状态...）

我想动态更改基本列图表中其中一列的边框宽度和边框颜色,类似于以下内容:

var chartingOptions = {
chart: {
    renderTo: 'container',
    type: 'column'
},
xAxis: {
    categories: ['5:1', '4:1', '3:1', '2:1', '1:1', '1:2', '1:3', '1:4', '1:5']
},
plotOptions: {
    column: {           
      grouping: false
    }
},
series: [
    {
    name: 'Serie 2',
    data: [20, 24, 30, 40, 60, 80, 90, 96, 100]},
{
    name: 'Serie 1',
    data: [100, 96, 90, 80, 60, 40, 30, 24, 20]}
            ]
};

var chart = new Highcharts.Chart(chartingOptions);

JSFIDDLE在这里.

我试图直接通过第一个系列改变它

chart.series[0].data[2].series.borderColor = 'black'

但它没有更新系列.一切都有帮助!

我正在使用highcharts api,是否有一种简单的方法来格式化yAxis,如下所示？

这是一个例子:JsFiddle

在yAxis上,我想在yAxis上保留符号"k","M"等,但我必须有一个点"." 作为千位分隔符,而不是","

我试图使用这个函数(其中localeTab是一个字符串,如EN-en,IT-it等等:

toLocaleString(localeTab)

它把"." 作为千位分隔符,但它删除"k","M"等符号(如1.500.000).

我想我可以使用formatter函数自己在javascript中完成它,但它会有点棘手:)

你知道任何有用的属性吗？

非常感谢!