Highcharts分散外部数据 [英] Highcharts scatter external data

问题描述

我创建了带有highcharts散点图的文档

  Highcharts.chart（'container'，{
 chart：{ 
类型：'scatter'，
 zoomType：'xy'
}，
标题：{
 text：''
}，
副标题：{
 text：''
}，
 xAxis：{
标题：{
启用：true，
文本：'输入日期' 
}，
 startOnTick：true，
 endOnTick：true，
 showLastLabel：true 
}，
 yAxis：{
 title：{
文本：'值'
} 
}，
图例： {
 layout：'vertical'，
 align：'left'，
 verticalAlign：'top'，
x：100，
y：70，
 floating ：true，
 backgroundColor：（Highcharts.theme&& Highcharts.theme.legendBackgroundColor）|| '#FFFFFF'，
 borderWidth：1 
}，
 plotOptions：{
 scatter：{
 marker：{
 radius：5，
状态：{
 hover：{
启用：true，
 lineColor：'rgb（100,100,100）'
} 
} 
}，
州：{
 hover：{
 marker：{
 enabled：false 
} 
} 
}，
 tooltip：{
 headerFormat：'< b> {series.name}< / b>< br>'，
 pointFormat：'Dana {point.x} = {point.y}'
} 
} 
}，
 series：[{
 name：'Values'， 
 color：'rgba（223，83，83，.5）'，
 data：[[167.6，64.5]，[167.6，72.3]，[167.6，61.4]] 
} ] 
}）; 
  

并且这可以工作。此代码来自文档页面。我得到了正常的分散数据，就像这个页面 Highcharts scatter jsfiddle
现在，我创建了另一个PHP文件，该文件生成了我实际需要的数据。它在文件highcharts.php中，结果是这个

[07.03.2017,21000]，[07.03.2017,25000]，[ 07.03.2017,33000]，[07.03.2017,27000]，[07.03.2017,30000]，[01.01.2017,700]，[11.05.2017,0]，[11.05.2017,0]，[11.05。 2017,0]，[11.05.2017,0]，

如何将数据连接到这个highcharts.php文件？我找到了一些例子，但我无法实现它的工作。所以开始我需要这个，一行数据显示在散点图上。我失去了几天，只是没有得到它我做错了什么。

解决方案

，您需要稍微解析它才能将其用作分散系列中的数据数组。首先，日期应该是字符串。其次，您需要使用 new Date（）来创建Date实例，并使用 getTime（）返回时间戳。此外，将xAxis类型更改为 datetime 。

API参考：

https://developer.mozilla.org/zh/docs/Web/JavaScript/参考/ Global_Objects / Date

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime

<例如：

http://jsfiddle.net/0025rsmt/ p>

I created document with highcharts scatter graph

                Highcharts.chart('container', {
                chart: {
                    type: 'scatter',
                    zoomType: 'xy'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    title: {
                        enabled: true,
                        text: 'Date of entry'
                    },
                    startOnTick: true,
                    endOnTick: true,
                    showLastLabel: true
                },
                yAxis: {
                    title: {
                        text: 'Values'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 100,
                    y: 70,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                    borderWidth: 1
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 5,
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        },
                        tooltip: {
                            headerFormat: '<b>{series.name}</b><br>',
                            pointFormat: 'Dana {point.x} = {point.y}'
                        }
                    }
                },
                series: [{
                    name: 'Values',
                    color: 'rgba(223, 83, 83, .5)',
                    data: [[167.6, 64.5], [167.6, 72.3], [167.6, 61.4]]
                }]
            });

and this works. This code is from documentation page. I get normal scatter data like on this page Highcharts scatter jsfiddle Now, I created another PHP file that produces me with data I actually need. it is in document highcharts.php and result is this

[07.03.2017,21000],[07.03.2017,25000],[07.03.2017,33000],[07.03.2017,27000],[07.03.2017,30000],[01.01.2017,700],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],

how to connect data to this highcharts.php file? I found some examples but I cannot get it to work. So for start I need this, ONE line of data to show on scatter diagram. I lost few days and just do not get it what I am doing wrong.

解决方案

If your PHP file returns the array presented above, you need to parse it a little bit in order to use it as data array in a scatter series. First of all, dates should be strings. Secondly, you need to use new Date() to create Date instance and use getTime() to return timestamps. Also, change xAxis type to datetime.

API Reference:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime

Example:
http://jsfiddle.net/0025rsmt/

这篇关于Highcharts分散外部数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！