标签: charts

我从 XML 文件中解析了三个数组，详情如下：

["x": "23.561799", "x": "-10.713591", "x": "-20.516543", "x": "27.352751", "x": "-21.090982"]
["y": "-5.777557", "y": "-24.425175", "y": "9.131939", "y": "7.052970", "y": "-26.059631"]
["r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000"]

假设这些被称为 arrayX、arrayY 和 arrayR。我将如何使用这些在 Chart.js 中呈现气泡图？我有在这里创建一个简单气泡图的代码：

var ctx = document.getElementById("myChart");
                    var myChart = new Chart(ctx, {
                        type: 'bubble',
                        data: {
                            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                            datasets: [
                            {
                                label: 'Gaze Map Month 1',
                                data: [
                                {
                                    x: 23,
                                    y: -10,
                                    r: 10
                                },
                                {
                                    x: …

我想在 y 轴上的温度值末尾添加一个摄氏单位。我对其他 SO 问题进行了一些研究，并尝试编写一个函数将单位附加到值的末尾，但没有奏效。

我尝试复制这个 JSFiddle 示例，但即使我使用的是最新版本的 ChartJs 也无法让它为我工作

http://jsfiddle.net/vy0yhd6m/80/

我正在运行 ChartJS 2.5.0，有人可以帮助我如何做到这一点吗？

JS

var ctx = document.getElementById("myChart").getContext("2d");

    // Create gradient
    grd = ctx.createLinearGradient(170.000, 600.000, 150.000, 0.000);

    // Add colors
    grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
    grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
    grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
    grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
    grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
    grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');




    var data = {
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", …

plt.title('Survival Rate')
plt.pie(total_survival, labels=[str(survival_percent) + "% " + "survived", str(100- survival_percent) + "% " + "died"])

我正在尝试向饼图添加标题，但出现此错误：

---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
<ipython-input-250-7e0f3cd8c625> in <module>()
----> 1 plt.title('Survival Rate')
  2 plt.pie(total_survival, labels=[str(survival_percent) + "% " + "survived", str(100- survival_percent) + "% " + "died"])
  3 

TypeError: 'str' object is not callable

我在网上看到的所有资源都将其标题写为括号内的字符串，并且不将其作为参数包含在内，plt.pie()因此我不确定我哪里出错了。

我想更改图表的背景颜色，如本例所示，使用 openpyxl。

在谷歌小组讨论中，我发现了以下代码片段：

from openpyxl.chart.shapes import GraphicalProperties 

props = GraphicalProperties(solidFill="999999") 
chart.graphical_properties = props 
chart.plot_area.graphical_properties = props

但保存到excel文件时，它对图表没有任何影响。

我正在使用 Google 时间线图表并想使用点击功能。只是当我点击彩色矩形或文本时，我想要一个 bootstrap Modal 出现。

google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
  [ 'Magnolia Room', 'Beginning JavaScript',       new Date(2017, 1, 30),  
new Date(2017, 2, 30) ],
  [ 'Learning for Life', 'Intermediate JavaScript',    new Date(2017, 3, 1),  
new Date(2017, 4, 30) ], …

我在 VS2017 中调整 C# 图表图例的布局时遇到困难。当我进入时Legends，Properties我可以更改几个属性，但我找不到如何更改图例边框与其项目之间的边距（因此，实际上是填充）。我无法更改的另一个属性：图例项之间的间距。我发现了一些关于“样式文件”的讨论，但我想避免这种情况。我还搜索了可以给我更多选择的不同参考资料，但我什么也没找到。

那么，有没有办法更改图例的属性，而不是 中显示的属性Properties？我希望找到类似的东西：“myLegend.padding = 10pt”。

我有以下图表：

但是，我想将 y 轴标签移动如下：

是否可以使用 ChartJS 在刻度线之间移动 y 轴标签，如上面的示例图像所示？

功能类似于options.scales.yAxes[].ticks.position选项，除了当前它被定义为in the x direction for the y axis，因为我在 y 轴的 y 方向需要它。更好的是，自动居中。

这个问题建立在上一个问题的基础上：ChartJS place y-axis labels between ticks。

使用 BeforeDraw 插件绘制刻度时，每次重新绘制画布时，刻度/标签最终都会“跳跃”。如果您运行代码片段并在将鼠标悬停在条形上和上时查看 y 轴标签，您将能够看到这种“跳跃”。

有没有办法在使用 BeforeDraw 绘制刻度的同时防止这种“跳跃”？

var barChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
         label: 'BAR',
         data: [10, 20, 30],
         backgroundColor: 'rgba(0, 119, 204, 0.5)'
      }]
   },
   options: {
      responsive: false,
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               "userCallback" : function(t, i){
                  var mapping_function =  [ "", "Critical", "Needs Work", "Good", "Needs Work", "Getting There", "Great Choices"];
                  //return t;
                  return mapping_function[mapping_function.length …

我正在尝试为双 y 轴折线图设置刻度，但要么图无法加载，要么加载完全相同。任何帮助将不胜感激

目标是设置价格刻度：[0.002, 0.004。0.006。0.008]，音量增加1000

也有价格问题，例如：0.00242、0.00521 都显示为 0.1

<?php
$sql = "SELECT Timestamp, LastPrice, Volume FROM vol";
$result = $dbconnect->query($sql);
?> 
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>
   
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

	  
	  
           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 = google.visualization.arrayToDataTable([
                ['Timestamp','LastPrice','Volume'],
                <?php
                    while($row = mysqli_fetch_assoc($result)){
                        echo "[           '".$row["Timestamp"]."', ".$row["LastPrice"].", ".$row["Volume"].",    ],";
                    }
					echo $row["LastPrice"];
                ?>
        ]);

        var materialOptions = {
			
		chart: {
          
        },
        width: 600,
        height: 300,
		
        series: {
          // …

我已经使用以下文档的帮助实现了一个反应图表

http://www.chartjs.org/docs/latest/charts/line.html

我已经成功地实现了它，但是这个文档没有展示如何为 y 轴设置最大值。我想将最大 y 轴设置为 100。但是因为我的数据集没有超过 19 的任何值，所以最大 y 轴设置为 20。

即使我的数据不超过 19，我如何将最大 y 轴值设置为 100。？

我的代码

class LineCharts extends Component {

    constructor() {
        super();

    }

    render() {

        var chartData = {

            labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            datasets: [
                {
                    color: "#4D5360",
                    highlight: "#616774",
                    borderColor: "rgba(179,181,198,1)",
                    pointBackgroundColor: "rgba(179,181,198,1)",
                    pointBorderColor: "#fff",
                    pointHoverBackgroundColor: "#fff",
                    pointHoverBorderColor: "rgba(179,181,198,1)",
                    label: 'Current lag',
                    fill: true,
                    lineTension: 0.1,
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    scaleOverride: …