标签: highcharts

如何在 Highcharts 中创建可拖动的情节线？我找不到这方面的信息。请看截图。您将在屏幕截图上看到一条绿线。该绘图线必须面向 xAxis 并可在轴 \xd0\xa5 上拖动最大和最小值。你能帮助我吗？也许是一些建议或官方文档的链接。提前谢谢您。\n屏幕截图

另请参阅一些短视频

https://drive.google.com/open?id=1sHeIZU1S5M15yxbzKWQrTE44pdrUz7PW

我正在尝试绘制时间序列，但我没有获得此图表左侧所示的股票工具。来自 highstocks 网站的示例：在此处输入链接描述

带选项的代码：

import React from 'react';
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'


class Graph extends React.Component {
    getOptions = (dataSets) => {
        return {
            yAxis: [{
                labels: {
                    align: 'left'
                },
                height: '80%',
                resize: {
                    enabled: true
                }
            }, {
                labels: {
                    align: 'left'
                },
                top: '80%',
                height: '20%',
                offset: 0
            }],

            title: {
                text: 'Summary'
            },

            series: [{
                name: 'INFY',
                data: dataSets.data
            }]
        };
    };

    render() {
        const {dataSets} = this.props;
        const options = …

我正在使用 React 和 typescript，我需要在图表打开后立即打开Highchart 工具提示。我需要在特定点打开它。

我知道我需要一个加载函数，但在打字稿中使用此关键字时出现错误。

我有一个图表,看起来像:

http://www.google.com/imgres?hl=en&sa=X&biw=1148&bih=538&tbm=isch&prmd=imvns&tbnid=ImVcaOUrw9RZ8M:&imgrefurl=http://peltiertech.com/WordPress/stack-columns-in-order-of-大小与 - VBA /&的docID = Wy54Uzfs1JDBAM&imgUrl的HTTP =://peltiertech.com/images/2009-05/StackChart4.png&w=502&h=331&ei=4fxlUOLCFMzSigLesIGYDQ&zoom=1&iact=hc&vpx=271&vpy=229&dur=1078&hovh=182&hovw=278&tx=195&ty= 91 SIG = 113812968337335397921&页= 1&TBNH = 132&tbnw = 199&开始= 0&NDSP = 10&VED =1吨:429,R:1,S:0,I:77

但是我想要一个图表,如下所示:http://www.google.com/imgres？hl = en&= zh&x&biw = 1148&bih = 538&tbm = isch&prmd = imvns& tbnid = NFn2T8iaojOpvM:&imgrefurl = http://peltiertech.com/Utility/ClusterStackUtility html的&的docID = _9NYGInExJfrmM&imgUrl的HTTP =://peltiertech.com/Utility/pix/clusterstackcolumns.png&w=282&h=207&ei=4fxlUOLCFMzSigLesIGYDQ&zoom=1&iact=hc&vpx=509&vpy=237&dur=85&hovh=166&hovw=226&tx=52&ty=80&sig=113812968337335397921&page=1&tbnh=150&tbnw = 203&开始= 0&NDSP = 10&VED =1吨:429,R:2,S:0,I:80

*以上只是图表的一个例子,以显示我想要的东西.没有意图复制任何东西.这些是来自Google搜索的随机图像.

谢谢

我在下面找到了代码.我想在Highcharts中有1个系列的不同符号,阈值= 50.当y值小于50时,我想要绿色符号,当y值大于50时,我想要方形符号.

谢谢您的帮助!

http://jsfiddle.net/mhardik/YgxEB/1/

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: 'Scatter Graph Demo'
        },
        xAxis: {
            title: {
                enabled: true,
                text: 'Height (cm)'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                text: 'Weight (kg)'
            }
        },
        tooltip: {
            formatter: function() {
                    return ''+
                    this.x +' cm, '+ this.y +' kg';
            }
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: …

我希望盒子的顶部和盒子的底部有不同的颜色,并且还有每个盒子(区域)的不同颜色的胡须和胡须的顶部.但是盒子里的所有线条都是相同的颜色(红色),而晶须的顶部和底部是相同的颜色(绿色)

现场演示,重现步骤

 Highcharts.chart('container', {

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'All Patients'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            categories: ['Asia Pacific', 'Europe', 'Latin America', 'North America', 'SWAC'],
            title: {
                text: '      '
            }
        },

        yAxis: {
            title: {
                text: 'Annual Center Volume 2016'
            },
            tickInterval: 5,
            min: 0,
            max: 75
            //plotLines: [{
            //    value: 932,
            //    color: 'red',
            //    width: 1,
            //    label: {
            //        text: 'Theoretical mean: 932',
            //        align: 'center',
            //        style: {
            // …

是否有可能没有左右填充的折线图？这条线是边缘到边缘,就像在设计中一样？

目前它看起来像那样

chartOptions: {
chart: {
  type: 'spline',
  spacingBottom: 0,
},
title: null,
legend: {
  enabled: false
},
credits: {
  enabled: false,
},
tooltip: {
  split: true,
  pointFormat: '{point.y} {series.name}',
},
plotOptions: {
  series: {
    shadow: true,
  },
},
xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  minPadding: 0,
  maxPadding: 0,
  tickWidth: 0,
  lineWidth: 0,
  crosshair: true,
},
yAxis: {
  visible: false,
},
series: [
  {
    name: 'Bookings',
    data: [43, 44, 43, 42, …

我在我的角度应用程序中使用 highstock 模块、指标模块和 highcharts。例如，这是我的带有指标的 highstock 图表的选项。

this.stock = new StockChart({
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'AAPL Stock Price'
  },
  series: [{
    tooltip: {
      valueDecimals: 2
    },
    name: 'AAPL',
    id: 'AAPL',
    type: 'candlestick',
    data: [
      [1487635200000, 2354.909912, 2366.709961, 2354.909912, 2365.379883],
      [1487721600000, 2361.110107, 2365.129883, 2358.340088, 2362.820068],
      [1487808000000, 2367.5, 2368.26001, 2355.090088, 2363.810059],
      [1487894400000, 2355.72998, 2367.340088, 2352.870117, 2367.340088],
      [1488153600000, 2365.22998, 2371.540039, 2361.870117, 2369.75],
      [1488240000000, 2366.080078, 2367.790039, 2358.959961, 2363.639893],
      [1488326400000, 2380.129883, 2400.97998, 2380.129883, 2395.959961],
      [1488412800000, 2394.75, 2394.75, 2380.169922, 2381.919922],
      [1488499200000, 2380.919922, 2383.889893, …

可能重复:
将PHP字符串传递给Javascript变量(并转义换行符)

我需要创建一个条形图来获取数据库中的数据.我为此下载了Highcharts.但是我无法在JavaScript中调用php变量.任何想法怎么做？

以及使用动态值创建图表的任何其他方式.

提前致谢.

<script>
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70, …

我正在尝试使用javascript highcharts但收到此错误: -

TypeError:$(...).highcharts不是函数数据:[3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8]

包含了highcharts libary文件,但它仍然无法正常工作.我的代码是:

<head>

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

<script>
function analytics()
{
            $('#container').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, …

我想根据我的喜好更改饼图 Highcharts 区域的颜色。

我怎样才能做到呢？

我已经包含了 highcharts 模块，我想以角度实现 highchart 的网络图。你能帮我实现它吗？

请在下面找到 stackblitz 链接：

https://stackblitz.com/edit/angular-sfytxa?file=src%2Fapp%2Fapp.component.ts

我在CMS应用程序中需要一些图表选项.我将使用饼图,区域图表,柱形图,条形图和仪表图表.从互联网上的所有选项中,我发现C3.js图表​​和HighCharts.js对我的项目很有用.除了许可之外,这两者之间有什么区别？哪个选项更好？

谢谢