标签: linechart

欢呼

我使用的折线图是使用Google API创建的绘制图（此图）。

运作良好，但现在有问题。我必须插入一些误差线或类似的东西（例如，variance）。可以使用Google API吗？我该怎么做？

我的目标是有一些像这样。

https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=ja#Configuration_Options

如何根据特定范围为单行指定不同的颜色？例如,一行应该是蓝色,从0到10,红色从10到20.

我正在尝试使用DefaultCategoryDataset绘制一个LineChart并且我正面临的问题是,当我尝试在两个值之间绘制空值时,两个点之间的连接丢失(即连接两个点的线不会出现),或者我必须跳过空值(通过对DataSet中的每个点执行空检查)以连接其他两个点,这导致x轴点不会在我的图形上绘制.

例如:如果我在x轴上有Unit1,Unit2,Unit3和一些值,比如每个10,20,30,它可以正常工作并绘制一条斜线.但是在Unit2中没有20,如果我设置为null,我只能在我的图表上绘制两个点而没有连接这两个点的线.

为了绘制线条,我必须从我的x轴跳过Unit2点.但我想要做的是我想将Unit1连接到Unit3而不跳过Unit2(并且它的值保持为null),我不想绘制0而不是null.

有没有办法做到这一点？

我是新来的,一般是d3.js/JavaScript.我想添加一个到多线图的转换,以便每个线(和相关的标签)一个接一个地"绘制".我已经设法让第一行(并且在较小程度上同时为所有行)工作,但我很难看到我如何能错开过渡.我已经尝试过使用一个for循环并.each()通过一个函数调用转换,但是没有任何方法可以使用任何方法.我们将非常感激地提供任何帮助.以下代码的相关部分.谢谢.

var country = svg.selectAll(".country")
    .data(countries)
  .enter().append("g")
    .attr("class", "country");

var path = country.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.country); })

var totalLength = path.node().getTotalLength();

d3.select(".line")
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(1000)
    .ease("linear")
    .attr("stroke-dashoffset", 0)
    .each("end", function() {
        d3.select(".label")
          .transition()
            .style("opacity", 1);
        });

var labels = country.append("text")
    .datum(function(d) { return {country: d.country, value: d.values[d.values.length - 1]}; })
    .attr("class", "label")
    .attr("transform", function(d) { return "translate(" + …

我试图改变不同行nvd3线图的颜色在这里,但我无法理解如何做到这一点.我想将示例中2行的颜色更改为绿色和青色.我试过了

nv.addGraph(function() {
   var chart = nv.models.lineChart()
      .useInteractiveGuideline(true)
      .color(["rgb(0,255,0)","rgb(255,165,0)"]);
}

它的工作的散点图这里.但是折线图的颜色没有变化.有什么建议.

谢谢

我正在使用MPAndroidChart。当我使用 LineChart setDrawFilled() 方法填充线条和 x 轴之间的空间，并手动将范围调整为大于默认值时，填充的部分将超出 x 轴，如下所示截屏：

蓝色填充应在绿色虚线处停止，该线位于 x 轴上方，但它会延伸至正 y 值。

*经过进一步调查，我发现似乎只有在绿线设置为 0 时才会发生。

我正在尝试使用更改图表的范围chxr.

我的代码是

<img class="image_graph" width="170px" height="180px" src="https://chart.googleapis.com/chart?chs=170x180&cht=ls&chco=0000FF&chd=t:<?php echo $test ?>&chxr=x,y,r&chxr=0,0,30|1,0,10|2,1000,0"/>

默认情况下,它取y轴0 to 100.

我该如何纠正这个并允许改变我的范围？

我参考了图表.它说它被弃用了.我应该使用其他谷歌图书馆吗？

我希望 LineChart 中的轴实时调整它的最大值和最小值。当新数据的 Y 值增加（正值和负值）时，resetAxisMaxValue() 和 resetAxisMinValue() 等函数运行良好，但是，一旦信号再次变低，Y 值 max 和 min 永远不会下降到较小的值，因此它可以显示图表完整画布上的所有新数据。我想检查是否有方法可以自动执行此操作，或者是否应该使用蛮力。谢谢你。

我希望在新的 google chars API 上获得图例分页。我以前看到它是可能的，但现在找不到任何文档。

如果不再可能，我怎样才能让我的折线图图例扩展图表 div？

我将 div 设置为 min-height: 400px 并且它强制 SVG 为 400px 并且不调整 div 的大小。

我制作了这个超级快速的演示，展示了 35 个图例，您可以看到它是如何将它们切断的。我要么希望它允许一些分页，要么根据需要扩展图表的大小，或者显示第二列图例。

https://jsfiddle.net/4y800onc/

如果您切换到经典模式，您会看到它尝试了一个非常奇怪的水平图例分页。不幸的是我无法切换到经典模式（我的应用程序依赖于材料模式）

  google.charts.load('current', {
    'packages': ['line', 'corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var button = document.getElementById('change-chart');
    var chartDiv = document.getElementById('chart_div');

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Month');
    data.addColumn('number', "Average Temperature");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours …

我正在使用Chart.JS 1.0.2创建折线图：

我想做的是将图表底部的标签移动到每个矩形的中心（而不是与垂直网格线对齐）：

在chartjs.org上没有关于此的文档，但是我相信有了一个巧妙的技巧，这个问题就可以轻松解决。关于如何实现这一目标的任何想法？