Highcharts

问题 I have a sample Highchart that I'm try to load JSON data without any luck. I see the data return in firebug but the chart bar and line doesn't get drawn. You can see my chart here jsfiddle.net. I know I'm missing something, but I can't seem to put my fingers on it. Any help would greatly appreciated, thank you in advance. This is my code: $(function() { var options = { chart: { renderTo: 'container', zoomType: 'xy' }, title: { text: 'JSON Chart' }, subtitle: { text: '2012 vs 2011' }, credits:

问题 Building upon my previous question here SO I want to reach this desired affect on mouse hove. Draw multiple series like so Could you please recommend highstock best practice for the same? Thanks 回答1: You can add an additional series in the first mouseOver event and then update its data. For example: series: [{ data: [...], point: { events: { mouseOver: function() { var chart = this.series.chart; if (!chart.series[1]) { chart.addSeries({ data: additionalData[this.index].slice() }); } else {

问题 I have an indicator which is a function of x, y. How can i draw this indicator on top of chart? Lets say here https://jsfiddle.net/yv3pehj8/ 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 }); } } } Instead of

问题 I have a dynamic data array that contains 3 ints that are used to build a pie chart. In most cases it works fine IE: [5, 10, 3]. The pie chart renders correctly and you see all the pieces. However in some cases the numbers can be widely different. IE [1,500,250] or [400,1,2]. When this is the case you will only see the larger of the pie pieces and the smaller ones become so small they can not be seen; or clicked. I need some way of correcting the data array for these cases. I have the ability

问题 I am developing a drilled down chart using HichartJS, the chart is getting generated but drill down is not functioning properly. I need the back button as well so that user can go back to the previous data. Here is my code, HTML: <div ng-controller="myctrl"> <highchart id="chart1" config="highchartsNG"></highchart> </div> JS: var myapp = angular.module('myapp', ["highcharts-ng"]); myapp.controller('myctrl', function ($scope) { $scope.highchartsNG = { options: { chart: { type: 'column' } },

问题 I would like to overlay images on top of a map (map features) and found that HighMaps/HighCharts has two options - but neither of these are suitable. I was wondering if there are any other options? Option 1: Embed an image using renderer.image - the problem is that the image is disconnected from the map so doesn't scale with it. Option 2: Embed image as map symbols - the problem is that these auto-scale, i.e. as you zoom into the map (map becomes larger), the icons become smaller. They should

问题 Example fiddle: link source: $(function () { $('#container').highcharts({ chart: { type: 'area' }, title: { text: 'xxx' }, subtitle: { text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+ 'thebulletin.metapress.com</a>' }, xAxis: { labels: { formatter: function() { return this.value; // clean, unformatted number for year } } }, yAxis: { title: { text: 'Nuclear weapon states' }, labels: { formatter: function() { return this.value / 1000 +'k'; } } }

问题 I have several charts that are added ids according to array data then they are rendered to the a particular chart according to its id. The ids are being added but the new chart data is not being updated. What is wrong with my code? My_jsfiddle $('.bars').each(function(){ bars = new Highcharts.Chart({ chart: {type:'bar',renderTo:this,backgroundColor:'#222',plotBorderWidth:0,plotBackgroundColor:{linearGradient:{ x1:0, y1:0, x2:0, y2:1 },stops: [[0.40, "#383838"],[1, "#000"],[0.50, "#383838"]]}

问题 I have some data that was taken every minute. But there are irregular gaps in it. I'm using stockchart (v6.0.5) with the 'line' chart type and my xAxis is 'datetime'. I want that the gaps don't cut the xAxis in pieces but rather reflect the time that has passed as in http://jsfiddle.net/VwkHu/177/ . I don't really want to fill in Null values in my dataset as the gaps can be large. How can I get this behavior with stockchart? BTW: If I change in the upper mentioned fiddle to stock chart by

问题 I have created a chart module using Angular2-highcharts but when I try to run the application I am getting the followoing error. ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'chart'. (" <!-- <p text-center>Kye Info Page under construction</p> --> <chart [ERROR ->][options]="chartOptions" type="chart"></chart> </ion-content> "): ng:///KeyinfoPageModule/KeyinfoPage.html@27:9 'chart' is not a known element: 1. If