标签: charts

我有一个条形图，我想在工具提示框中显示第二个标签，该标签将从数据库中填充。您可以从下面的代码中看到我已经开始进行设置，以便可以在工具提示中显示多个标签（短，长），并且我希望能够将来自数据库的多个值显示为标签。

例如，我的桥ID为135554（bridge_id_grab），而该桥已有35年的历史（bridge_age_grab），位于里程碑13.34（bridge_mp_grab）。

所以我想在工具提示中显示为

“桥ID：135554，桥龄：35，里程碑：13.34”

我想我很接近-只是想不出如何使用bridge_mp_grab只获取一个值-它显示为数据库中所有值的字符串。

这是我的代码：

             function Label(short, long) {
              this.short = short;
              this.long = long
             }
             Label.prototype.toString = function() {
              return this.short;
             }

        var barChartData2 = {
            //labels : bridge_id_grab,
            labels: [ 
              new Label("J", bridge_mp_grab), 
              new Label("F", "FEB"), 
              new Label("M", "MAR"),
              new Label("A", "APR"),
              new Label("M", "MAY"),
              new Label("J", "JUN"),
              new Label("J", "JUL")
            ],
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : ["rgba(220,220,220,0.5)"],
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : bridge_age_grab,
                }
            ] …

我试图摆脱标签“ undefined”的显示，因为它只有一个数据集，不需要图例。

这是我的代码：

// Radar chart data
var radarData = {
labels : ["Abs","Arms","Back","Butt","Chest","Legs","Shoulders"],
datasets : [
    {
  lavel: "test",
        fillColor: "rgba(102,45,145,.1)",
        strokeColor: "rgba(102,45,145,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : [65,59,90,81,56,55,40]
    }
]
};

// Create Radar chart
var ctx = document.getElementById("radarChart").getContext("2d");

var myNewChart = new Chart(ctx, {
type: "radar",
data: radarData
});

由于某些原因，无法添加“选项：[scaleShowLabels = false]”。

我想在R中创建这样的图表:http://bl.ocks.org/mbostock/4063269

所以只是一个没有轴的气泡图,气泡可以随机分散,只有size参数.

我很感兴趣在R中这样做,我熟悉的选项需要提供x,y和size变量.

如果数据中只有一个对象，如何从饼图图表中删除切片的线。我想看到只有一个数据的完整圆圈。现在，它在圆中显示了一条切片线。我不希望它在那里。

plotOptions: {
        pie: {
            allowPointSelect: true,
            slicedOffset: 0
        }
    },

    series: [{
        data: [
            {
                name: 'Firefox',
                y: 44.2,
                selected: true,
                sliced: false
            },

        ]
    }]

屏幕截图图像

任何想法如何绘制带有这样标题的甜甜圈图：

我尝试了几个库，但没有成功。我无法在每个切片之间创建这些白线。带下划线的标题对我来说也太困难了。任何帮助将不胜感激！先感谢您！

以下是Google Superbowl时间轴示例:

https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation

有没有办法将日期/年份移动到时间线图表的顶部？

或者,是否有任何其他时间线图表可以提供额外的自定义？

我正在使用Danielgindi的图表框架将数据呈现给用户。我想要做的是使用来显示两个图表CombinedChartView。这两个图表分别是BarChartDataSet和LineChartDataSet。我可以成功显示两组数据，但是似乎无法控制绘图顺序。条形图BarChartDataSet始终位于的后面LineChartDataSet。我希望此订单可以颠倒并LineChartDataSet在后面（包括我所应用的所有填充）。

我的问题

如何更改绘制顺序，CombinedChartView使折线图在背面而不是正面？

这是我的代码：

// barDataEntries and lineDataEntries are generated in a different section and are not relevant to this question. Any data will do.
// barDataEntries is of type [BarChartDataEntry]()
// lineDataEntries is of type [ChartDataEntry]()
let barChartSet = BarChartDataSet(yVals: barDataEntries, label: "The Bars")
let lineChartSet = LineChartDataSet(yVals: lineDataEntries, label: "The Line")
barChartSet.barShadowColor = UIColor(red: 1, green: 0, blue: 0, alpha: 0)  // …

在图表选项配置中,我可以制作自己的标签.这是一个条形图:

tooltips: {
      callbacks: {
        label: function(tooltipItem) {
          var label = tooltipItem.yLabel;
          return  'Scans : ' + label;
        }
      }
    }

但是对于饼图,所有tooltipItems都是空的或0值.我可以使用什么参数来获取我在饼图中悬停的位置的值？(特定切片的值)

我正在使用Chart.js 2.1.4,我想根据工具提示项值(yAxis值)对工具提示项进行排序.我还想为值添加千位分隔符.

下图中的行应根据值进行排序:

这为Scales添加了分隔符:Chart.js 2.0使用Currency和Thousands Separator格式化Y轴

使用文档:http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration和上面的问题我尝试修改Tooltips值的代码:

var chart_config = {
  type: 'line',
  data: {datasets: mydatasets},
  options: {
    tooltips: {
      mode: 'label',
      bodySpacing: 10,
      titleMarginBottom: 15,
      callbacks: {
        beforeLabel: function(tooltipItem, data) {
          var tooltipValue = tooltipItem.xLabel + ': ' + tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
          console.log(tooltipValue);
          return tooltipValue;
        },
      },
    },
  }
};
var chartHolder = document.getElementById("chartHolder");
var chart = new Chart(chartHolder, chart_config);

问题是它现在只返回部分工具提示项,并且控制台中存在错误:TypeError: vm.labelColors[i] is undefined.

如何格式化函数的返回值以使其没有任何错误并按指定的方式显示数据？

我目前正在使用MPAndroidChart。我想限制要显示的行数和列数。

为了实现它，我使用了setVisibleXRangeMaximum（）和setVisibleYRangeMaximum（）函数。但是上述两种方法均无效。

我已经将visibleXRangeMaximum和visibleYRangeMaximum值设置为3。但是图表显示了x轴和y轴上的所有值。

码：

    lineChart.setVisibleXRangeMaximum(3);
    lineChart.setVisibleYRangeMaximum(3, YAxis.AxisDependency.LEFT);


    barChart.setVisibleXRangeMaximum(3);
    barChart.setVisibleYRangeMaximum(3, YAxis.AxisDependency.LEFT);

屏幕截图：

在下图中，显示了所有值，而预期输出应包含3行和3列。