标签: linechart

如何在google api折线图中禁用x轴和y轴线

我在我的网络应用程序中使用谷歌api的线图.在该折线图中我不想要x轴线和y轴线,但我不能很好地如何删除除图形之外的线.请你帮助我好吗.我用这个例子来练习

<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
Run Code Online (Sandbox Code Playgroud)

linechart google-api

7
推荐指数
2
解决办法
2万
查看次数

Chart.js中的可滚动x轴

我想使用Chart.js库在我的网站上绘制图表,但我打算为图表提供大量数据(> 1000).但是,当我将数据提供给chart.js折线图时,图表不可滚动,但值被推到一起使图表不可读.有没有办法让chart.js折线图在x轴上滚动?

javascript charts linechart

7
推荐指数
1
解决办法
3563
查看次数

angular-nvd3如何显示折线图的数据值

我想使用angular-nvd3创建一个LINE图表,每个数据点顶部都有标签并显示数据值.我能够找到选项"showValues",它可以用于discreteBarChart,但这些选项似乎不适用于折线图.

有帮助吗?下面是我想要的图片.更新:我知道事实上"showValues"不在LineChart中.但有没有解决方法.?

在此输入图像描述

linechart nvd3.js angular-nvd3

7
推荐指数
0
解决办法
549
查看次数

Plotly:如何使用 px.line 更改线条样式?

我的数据框看起来与此类似:

>>>Hour    Level   value   
0  7        H      1.435
1  7        M      3.124
2  7        L      5.578
3  8        H      0.435
4  8        M      2.124
5  8        L      4.578
Run Code Online (Sandbox Code Playgroud)

我想在绘图中创建折线图,该折线图将根据“级别”列具有不同的线条样式。

现在我有默认线条样式的折线图:

import plotly.graph_objects as go
fig = px.line(group, x="Hour", y="value",color='level', title='Graph',category_orders={'level':['H','M','L']}
             ,color_discrete_map={'H':'royalblue','M':'orange','L':'firebrick'})

fig.show()
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

我想控制每个级别的线条样式。直到知道我看到做到这一点的唯一方法是为每个“级别”添加,但使用 add_trace 如下:

# Create and style traces
fig.add_trace(go.Scatter(x="Hour", y="value", name='H',
                         line=dict(dash='dash')))
fig.add_trace(go.Scatter(x="Hour", y="value", name = 'M',
                         line=dict(dash='dot')))
fig.show()
Run Code Online (Sandbox Code Playgroud)

但我不断收到此错误:

ValueError:为 scatter 的 'x' 属性收到的类型 'builtins.str' 的值无效 收到的值:'Hour'

The 'x' property is an array that may be specified …
Run Code Online (Sandbox Code Playgroud)

python linechart linestyle plotly plotly-python

7
推荐指数
1
解决办法
2万
查看次数

JavaFX 2.x:如何将Line,Grid和X Ticks一起移动?

下面的代码绘制XYLineChart:通过鼠标左键单击并拖动绘制的线可以左/右翻译.

import javafx.application.Application; 
import javafx.beans.property.SimpleDoubleProperty; 
import javafx.event.EventHandler;  
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.XYChart; 
import javafx.stage.Stage; 
import javafx.scene.Scene; 
import javafx.scene.chart.LineChart; 
import javafx.scene.input.MouseEvent; 
import javafx.scene.layout.BorderPane;
enter code here


public class GridMove extends Application {

    BorderPane pane;
    XYChart.Series series1 = new XYChart.Series();
    SimpleDoubleProperty rectinitX = new SimpleDoubleProperty();
    SimpleDoubleProperty rectX = new SimpleDoubleProperty();
    SimpleDoubleProperty rectY = new SimpleDoubleProperty();

    @Override
    public void start(Stage stage) {

        final NumberAxis xAxis = new NumberAxis(1, 12, 1);
        final NumberAxis yAxis = new NumberAxis(0.53000, 0.53910, 0.0005);

        xAxis.setAnimated(false);
        yAxis.setAnimated(false);

        yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {
            @Override …
Run Code Online (Sandbox Code Playgroud)

grid linechart javafx-2

6
推荐指数
1
解决办法
2680
查看次数

在.NET图表中仅使用X轴中的自定义标签

我在C#中创建一个.NET线图,X轴间隔为几周.对于我的项目,我只想使用自定义标签,但是现在我仍然需要网格线.有没有人知道在保留自定义标签的同时隐藏默认X轴标签的方法?

我试过这个:

Chart4.ChartAreas[0].AxisX.LabelStyle.Enabled = false;
Run Code Online (Sandbox Code Playgroud)

显而易见的结果是没有应用标签,这不是我想要做的.

编辑: 生成原始行的代码是这样的:

Chart4.ChartAreas["ChartArea1"].AxisX.LabelStyle.Format = "M";
Run Code Online (Sandbox Code Playgroud)

自定义标签的代码是这样的:

int month = XValues[0].Month;
var XAxis = Chart4.ChartAreas[0].AxisX;

DateTime StartMonthPos = XValues[0];
DateTime EndPos = new DateTime();

foreach (DateTime Date in XValues)
{
    EndPos = Date;

    if (Date.Month != month)
    {
        Chart4.ChartAreas[0].AxisX.CustomLabels.Add(StartMonthPos.ToOADate(), EndPos.ToOADate(), StartMonthPos.ToString("MMMM"), 1, LabelMarkStyle.None);
        StartMonthPos = Date;
    }

    month = Date.Month;
}

XAxis.CustomLabels.Add(StartMonthPos.ToOADate(), EndPos.ToOADate(), StartMonthPos.ToString("MMMM"), 1, LabelMarkStyle.None);
Run Code Online (Sandbox Code Playgroud)

该图表如下所示: 带有日期的图表

它看起来应该是这样的: 没有约会的图表

.net c# charts linechart axis-labels

6
推荐指数
1
解决办法
1万
查看次数

使用序数x轴与d3.js和nvd3.js的折线图

我试图从数据集中制作折线图,同时保持X轴分类.对于观察者来说,它看起来像一个线图,在观测的X坐标之间具有等距的间距:

(1 ------ 5 ------ 30 ------ 600)

现在我得到这样的东西:

(1-5 ----- 30 ------------------- 600)

这是我的数据集:

var ds1 =  [
  {
    key: 'VAR-1',
    color: '#FF7F0E',
    values: [
   { "x" : "600", "y" : 0.07706} 
 , { "x" : "30", "y" : 0.00553} 
 , { "x" : "5", "y" : 0.00919} 
 , { "x" : "1", "y" : 0.00969} 
    ]
  }
];
Run Code Online (Sandbox Code Playgroud)

我尝试创建序号轴并将其设置在折线图对象中:

var chart =nv.models.lineChart()
             .margin({top: 10, bottom: 40, left: 60, right: 30});   
var x = d3.scale.ordinal().domain(["1","5", "30", "600"]);
chart.xAxis.scale(x);

chart.yAxis …
Run Code Online (Sandbox Code Playgroud)

javascript linechart d3.js nvd3.js

6
推荐指数
1
解决办法
4444
查看次数

AchartEngine折线图Xaxis Android

我在android上工作achartengine并完成所有的工作我在线图中遇到一个问题我提到了xaxis标签,但它的显示像2,4,6,8,10,12等等与我的xaxis标签覆盖,我想要在xaxis中隐藏2,4,6,8,10,12个标签.如果你不明白,请参见下图:

在此输入图像描述

这是完整的代码:

public class ChartExample extends Activity {
    private GraphicalView mChartView;

    XYMultipleSeriesRenderer renderer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_chart);

        LinearLayout layout = (LinearLayout) findViewById(R.id.linearLayout2);

        String[] titles = new String[] { "spens1","2second" };
        List<double[]> x = new ArrayList<double[]>();
        x.add(new double[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 });
        x.add(new double[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 });
        // }
        List<double[]> values …
Run Code Online (Sandbox Code Playgroud)

android linechart achartengine

6
推荐指数
1
解决办法
5858
查看次数

是否可以在JAVAFX上创建带有锁定y轴的水平滚动折线图?

我想linechartJAVAFX上创建一个锁定y轴的水平滚动.我一直在寻找一个例子或类似的东西,但我没有找到任何与JAVAFX.当我滚动(当然)并且我想要至少看到传奇和y轴时,我试图把它linechart放入一个scrollpane但是所有都在左右移动...

有任何想法吗?谢谢!

例如在chart.js上是这样的:

在此输入图像描述

css java javafx linechart scrollpane

6
推荐指数
1
解决办法
367
查看次数

Chart.js - 样式图例:较小的圆圈

我用chart.js 创建了一个折线图。我使用以下方法将图例符号形式从矩形更改为圆形:

legend: {
  display: true,
  labels: {
    usePointStyle: true,
  },
}
Run Code Online (Sandbox Code Playgroud)

我想改变圆圈的大小。但是根据文档,这只有在我还更改字体大小时才有可能:

标签样式会匹配对应的点样式(大小基于fontSize,在这种情况下不使用boxWidth)。- https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

有谁知道是否有另一种选择来改变大小?或者我必须使用generateLabels()

这是一个codePen来看看。

javascript charts linechart chart.js chart.js2

6
推荐指数
1
解决办法
3052
查看次数